add event listener with argument in a loop [duplicate]

Question

I am dynamically creating buttons with a on click event the following way:

//add button
for(i=1;i<=narrow+1;i++){
    var btn = document.createElement("BUTTON");
    btn.id="element"+i;
    var t = document.createTextNode("3D View");
    btn.appendChild(t);
    btn.style.position="absolute";
    btn.style.top="520px";
    btn.style.left=100+120*(i-1)+"px";
btn.addEventListener('click', function(){window.alert(i-1+" "+nmol[i-1]);});

The buttons created are fine but the argument in the function of the addEventListener event seems to no increment at all. When printed i stayed to value 1.

Anyone can explain me why?

Thanks

Also see stackoverflow.com/questions/750486/…

Arun P Johny
– Arun P Johny

2015-05-12 10:32:52 +00:00
Commented May 12, 2015 at 10:32 — Arun P Johny
– Arun P Johny, Commented May 12, 2015 at 10:32
developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/…

Arun P Johny
– Arun P Johny

2015-05-12 10:33:07 +00:00
Commented May 12, 2015 at 10:33 — Arun P Johny
– Arun P Johny, Commented May 12, 2015 at 10:33

AmmarCSE · Accepted Answer · 2015-05-12 17:30:07Z

1

Modify it so that there is an inner closure within the loop

(function(index){
    btn.addEventListener('click', function(){window.alert(index-1+" "+nmol[index-1]);});
 }
)(i);

What was happening is i was global to the loop and by time the click event was fired, i was the last iterated value.

However, when you enclose a function in a parenthesis, you are effectively making a closure which reduces the scope of variables to within the parenthesis.

See it working here

edited May 12, 2015 at 17:30

answered May 12, 2015 at 10:32

AmmarCSE

30.7k6 gold badges48 silver badges53 bronze badges

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

4 Comments

Laetis Over a year ago

I still only have the last value of index or i displaying for all buttons.

AmmarCSE Over a year ago

@Laetis, can you reproduce it in a fiddle so I can better assist you?

Laetis Over a year ago

I tried but I am not conforable with this tool, nethertheless all the code is ther: jsfiddle.net/Ly5n9jjd

AmmarCSE Over a year ago

@Laetis, I have corrected my answer with a working fiddle.

Collectives™ on Stack Overflow

add event listener with argument in a loop [duplicate]

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related