CODEWITHSUNDEEP
javascripteventsevent-handlingdom-events
Sourabh
Sourabh

Reputation: 1765

Attaching event in loop

What am doing is attaching event on a class using a loop and index values are being used in the event handler code. Here is my code:

var classElements=document.getElementsByClassName("a");
for(var i=0; i<4; i++)
{
    classElements[i].onClick=function(){
       alert("Clicked button : "+i);
    }
}

Whenever I click any of the buttons, it alerts:

Clicked Button : 4

What could be the problem?

Upvotes: 3

Views: 110

Answers (2)

vol7ron
vol7ron

Reputation: 42099

You need a closure in order to capture the changes of i. As Lou stated this is due to post evaluation.

var classElements=document.getElementsByClassName("a");
for(var i=0; i<4; i++)
    classElements[i].onclick = (function(i){
          return function(){ alert("Clicked button : " + i) }; 
       })(i);

Upvotes: 2

Lou Franco
Lou Franco

Reputation: 89162

JavaScript closes over the object and evaluates it later when it is called. At the time it is called, i is 4.

I think you want something like:

var classElements=document.getElementsByClassName("a");
for(var i=0; i<4; i++)
{
    classElements[i].onClick=function(j) { 
       return function(){
          alert("Clicked button : "+j);
       };
    }(i);
}

EDIT: shown with named functions to make the code more clear

var classElements=document.getElementsByClassName("a");
for(var i=0; i<4; i++)
{
    var makeFn = function(j) { 
       return function(){
          alert("Clicked button : "+j);
       };
    };
    classElements[i].onClick = makeFn(i);
}

Upvotes: 4

Related Questions