Javascript closure issue with several scopes

Question

What the best way to fix this problem with closure in jsavascript?

Here is I have simple problem:

10 spans and onclick event(I expect alert number of block on each click):

var spans = document.getElementsByTagName('span');

function addEvents(divs) {
    for(var i=0; i < divs.length; i++) {
        divs[i].innerHTML = i;
        divs[i].onclick = function() { alert(i) }
    }
}

addEvents(spans);

JSFiddle link.

score 1 · Answer 1 · answered Mar 28 '13 at 15:24

Wrap it in a self-executing closure:

divs[i].onclick = (function(i) {
    return function() {
        alert(i);
    };
})(i);

To keep it shorter: define it as a callback:

var callback = function(i) {
    return function() { alert(i); };
};

divs[i].onclick = callback(i);

Javascript closure issue with several scopes

1 Answers1