How do I add an unique argument when adding onclick events during a loop?

Question

What I'm trying to do is add a unique onclick on each button using parameters so I can identify each of the buttons when they are clicked, using function parameters.

function createProducts() {
    for(var i = 0; i < products.length;i++) {
        var li = document.createElement("li");
        li.className = "products";
        li.onclick = "purchase(" + i + ")";
        li.innerHTML = products[i][0] + "<span class=\"price\"> Klikk/s: " + products[i][1] + " Pris: " + products[i][2] + "</span>";
        document.getElementById("list").appendChild(li);
    }
}

function purchase(id) {
    alert(id);
}

I've tried

li.onclick = purchase(i);

And

li.onclick = "purchase(" + i + ")";

But none of these work.

T.J. Crowder · Accepted Answer · 2015-10-26 11:12:23Z

You have a couple of choices. You can create a variable for your handler to close over that doesn't change (like i does). You can do that in your case with Function#bind:

function createProducts() {
    for(var i = 0; i < products.length;i++) {
        var li = document.createElement("li");
        li.className = "products";
        li.onclick = purchase.bind(li, i); // <====
        li.innerHTML = products[i][0] + "<span class=\"price\"> Klikk/s: " + products[i][1] + " Pris: " + products[i][2] + "</span>";
        document.getElementById("list").appendChild(li);
    }
}

Function#bind returns a function that, when called, will call the original with a specific this value (we're setting it to the element reference) and any arguments you passed bind (in our case, i). Since the value that gets bound is the value of i when we call bind, not when the click occurs, it doesn't change like i would.

Alternately, you can store the id on the element itself as an attribute, and then use that in your handler:

function createProducts() {
    for(var i = 0; i < products.length;i++) {
        var li = document.createElement("li");
        li.className = "products";
        li.setAttribute("data-id", i);
        li.onclick = purchase;
        li.innerHTML = products[i][0] + "<span class=\"price\"> Klikk/s: " + products[i][1] + " Pris: " + products[i][2] + "</span>";
        document.getElementById("list").appendChild(li);
    }
}

function purchase() {
    // Use this.getAttribute("data-id") here to get the value
}

Note that in both cases, we're using real function references, not strings. You can use functions with the onXyz properties on elements, or of course use the standard addEventListener (or attachEvent on old IE).

DontVoteMeDown · Accepted Answer · 2015-10-26 11:12:29Z

0

Try this in the li creation loop:

li.onclick = purchase;
li.dataset.index = i;

In the purchase event:

function purchase(id) {
    var index = this.dataset.index;
}

More about data attributes(dataset) here and here.

answered Oct 26, 2015 at 11:12

DontVoteMeDown

21.5k10 gold badges72 silver badges113 bronze badges

1 Comment

DontVoteMeDown Over a year ago

@timzand As TJ explained, you store the index in loop-time to an attribute called data attribute on your element. It will be available to reading anywhere, anytime in your element. So, inside the click event function you just read it.

Collectives™ on Stack Overflow

How do I add an unique argument when adding onclick events during a loop?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related