How to pass an Element's ID to an Anonymous Function? [duplicate]

Question

This question already has answers here:

Javascript infamous Loop issue? [duplicate] (5 answers)

Closed 9 years ago.

I am trying to add an event listener to elements that have the same class by doing something like this...

// Add listener's to all elements that have a class name of "foo"
var foos = document.getElementsByClassName("foo");
for (i = 0; i < foos.length; i++) {
    var fooId = foos[i].id;
    foos[i].addEventListener('click', function(){doFoo(fooId)});
}

function doFoo(id) {
    document.getElementById("console").innerHTML += "<li>You clicked Foo " + id + "</li>";
}

The above JavaScript works other than the fact that the anonymous function argument "fooId" will always evaluate to the id of the last element of the collection - instead of the id of the item in scope of the loop.

How do I pass the id of the element id to the anonymous function parameter?

In this fiddle http://jsfiddle.net/6e4NC/ you will see that no matter which Div you click, the JavaScript will always claimed that you clicked the last Div.

Answer 1

var foos = document.getElementsByClassName("foo");
for (i = 0; i < foos.length; i++) {
   var fooId = foos[i].id;
   var f = function (fooId) {
       return function (){doFoo(fooId)};
    }(foos[i].id);
    foos[i].addEventListener('click', f);
}

Example

Answer 2

function doFoo(id) {
    document.getElementById("console").innerHTML += "<li>You clicked Foo " + id + "</li>";
}

var foos = document.getElementsByClassName("foo");
for (i = 0; i < foos.length; i++) {
    foos[i].addEventListener('click', function (e) {
        doFoo(e.target.id);
    });
}

The event has the target, make use of that http://jsfiddle.net/6e4NC/3/

Answer 3

for (i = 0; i < foos.length; i++) {
    var fooId = foos[i].id;
    foos[i].addEventListener('click', function (e, args) {
        doFoo(e);
});

function doFoo(e) {
    var fooId = e.target.id || e.srcElement.id;
    document.getElementById("console").innerHTML += "<li>You clicked Foo " + fooId + "</li>";
}