Closure in Javascript [duplicate]

Question

This question already has answers here:

Closed 7 years ago.

Possible Duplicate:
Passing values to onclick

I have 100 elements with ids divNum0,...,divNum99. Each when clicked should call doTask with the right parameter.

The code below unfortunately does not close i, and hence doTask is called with 100 for all the elements.

function doTask(x) {alert(x);}

for (var i=0; i<100; ++i) {
    document.getElementById('divNum'+i).addEventListener('click',function() {doTask(i);},false);
}

Is there someway I can make the function called with right parameters?

Answer 1

Create a closure via a self-executing function literal (or a named factory function)

function doTask(x) { alert(x); }

for(var i = 100; i--;) {
    document.getElementById('divNum' + i).onclick = (function(i) {
        return function() { doTask(i); };
    })(i);
}

or use the DOM node for information storage

function doTask() { alert(this.x); }

for(var i = 100; i--;) {
    var node = document.getElementById('divNum' + i);
    node.x = i;
    node.onclick = doTask;
}

The latter is more memory-friendly as no superfluous function objects are created.

Answer 2

Although the (correct) answer is the duplicate, I'd like to point out a more advanced method - replacing loops with iterators, which effectively solves javascript "late-bound" closures problem.

loop = function(start, end, step, body) {
    for(var i = start; i != end; i += step)
       body(i)
}

loop(1, 100, 1, function(i) {
   // your binding stuff
})