Closure in Javascript [duplicate]

Question

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?

if you don't need to add more than one event listener, you should assign to onclick as this works across browsers — Christoph
– Christoph, Commented Nov 14, 2009 at 16:52
I'd also suggest considering to use event delegation and put the click handler just to the parent element. When the click event fires, you just check the target and execute the wanted functionality. — Kimmo Puputti
– Kimmo Puputti, Commented Nov 14, 2009 at 18:54

Community · Accepted Answer · 2017-05-23 11:47:46Z

3

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
})

edited May 23, 2017 at 11:47

CommunityBot

11 silver badge

answered Nov 14, 2009 at 18:46

user187291

54.1k19 gold badges98 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Christoph · Accepted Answer · 2009-11-14 16:48:32Z

2

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.

answered Nov 14, 2009 at 16:48

Christoph

171k36 gold badges188 silver badges243 bronze badges

1 Comment

Braden Best Over a year ago

NB: it's more accurate to say immediately-invoked function expression :)

Collectives™ on Stack Overflow

Closure in Javascript [duplicate]

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related