1

When I click the button it preforms a function, I am now trying to make it so name: "", is entered when the button is pressed.

I added name="item1" inside the tag but this does not yield the desired result.

<img onclick="addbeat()" name="item1" src="button.png"/>

<script>
function addbeat() {
simpleCart.add({
     name: "",
     price: .99
 });
}
</script>
Jeff
  • 1,018
  • 1
  • 15
  • 33
  • 1
    As mentioned in Sterling's answer and other comments, you should learn about `addEventListener` (and attachEvent if necessary) and move away from specifying `onclick="something"` inline event handlers. – Stephen P Mar 17 '15 at 22:24

3 Answers3

3

You're using an event, so you can use the this keyword.

simpleCart.add({
     name: this.name,
     price: .99
});

Also, I highly suggest moving away inline events. It's messy and leads to unreadable code. Use an event handler!

var x = document.getElementById("imgTag"); //add id to HTML element
x.addEventListener("click", addbeat, false);
Sterling Archer
  • 22,070
  • 18
  • 81
  • 118
  • +1 but would also be helpful if you also showed OP the addbeat handler with event parameter... `function addbeat(e) { ... e.target.name ... etc. }` – Stephen P Mar 17 '15 at 22:08
  • You can't use `this` in the OP's given example - because it will refer to the `Window` object (not the image). You can only use `this` if an event listener is used the way you described. – bvaughn Mar 17 '15 at 22:10
  • @brianvaughn didn't know that, but if OP moves away from inline events, it will not reference the Window object. – Sterling Archer Mar 17 '15 at 22:11
  • Agreed, just wanted to point this out since this seems to be the settled on answer. (It's why I used event.target below..) – bvaughn Mar 17 '15 at 22:12
  • True, but he is right about inline events. Easy enough to bind the objects correctly. +1 – talves Mar 17 '15 at 22:12
  • I agree with avoiding inline event handlers. :) Just wanted the chosen answer to be clear. – bvaughn Mar 17 '15 at 22:13
1

Update for clarity

You have 2 options here. If you're going with an inline event handler, then you can pass an event object to your click handler and access the image that was clicked using event.target, like so:

<img onclick="addbeat(event)" name="item1" src="button.png"/>

<script>
function addbeat(event) {
simpleCart.add({
     name: event.target.name,
     price: .99
 });
}
</script>

A preferable option (as pointed out in surrounding discussion) would be to programmatically attach your click handler- at which point you could use either event.target or this.

<img id="anImage" onclick="addbeat(event)" name="item1" src="button.png"/>

<script>
function addbeat() {
simpleCart.add({
     name: this.name,
     price: .99
 });
}

document.getElementById('anImage').onclick = addbeat;
</script>
bvaughn
  • 13,300
  • 45
  • 46
0

I'm not sure if I understood your question, but: 

<img onclick="addbeat(this.name)" name="item1" src="button.png"/>

<script>
    function addBeat(name)
    {
        simpleCart.add({
            name: name,
            price: .99
        });
    }
</script>

Does this help?

Faquir
  • 185
  • 2
  • 4
  • 16