How can I make sure the addEventListener doesn't ignore the iteration of the i var in my for loop? [duplicate]

Question

I'm working on a userscript that will make lots of buttons, and I can't seem to give them all an unique function.

I already tried

 downArrow.onclick = function (){downVote(id, username)};<br>

and

 downArrow.onclick = "downVote(\"" + id + "\", \"" + username + "\")";

But they don't work. Then I read somewhere that only the following works:

 downArrow.addEventListener('click', downVote(id, username), false);

This causes that all the buttons will only downvote the last ID and username of the iteration.

I want them all to have unique onclick functions.

Entire for loop:

var targetPosts = document.getElementsByClassName("thing message");
for (var i=0;i<targetPosts.length;i++) 
    {
    try
      {
        id = targetPosts[i].getAttribute("data-fullname");
        username = targetPosts[i].childNodes[4].childNodes[1].childNodes[0].childNodes[1].childNodes[1].childNodes[0].innerHTML;

        var upArrow=document.createElement("DIV");
        upArrow.className = "arrowUp";
        upArrow.id = id + "up";
        upArrow.addEventListener('click', function(){ upVote(id, username)} , false);

        var downArrow=document.createElement("DIV");
        downArrow.className = "arrowDown";
        downArrow.id = id + "down";
        downArrow.addEventListener('click', function(){ downVote(id, username)} , false

      targetPosts[i].childNodes[3].appendChild(upArrow);
      targetPosts[i].childNodes[3].appendChild(downArrow);
      }
    catch(err){}
    }

Answer 1

bind was invented for exactly such a case :

 upArrow.addEventListener('click', upVote.bind(upArrow, id, username), false);

should do the job.

Answer 2

Since JavaScript has no block scope (will come with ES6) try the following:

downArrow.addEventListener('click', function(uid, uname) {
    return function() {
        downVote(uid, uname);
    };
}(id, username), false);

When invoking the anonymous function (happens immediately) you capture the current state of id and username and use it when the inner function is invoked (happens when the user clicks the button).

In ES6 you can use let id = ... to define a variable with block scope and your posted code should work fine.