add event listener with argument in a loop

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 http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — Arun P Johny, May 12 '15 at 10:32
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures#Creating_closures_in_loops.3A_A_common_mistake — Arun P Johny, May 12 '15 at 10:33

AmmarCSE · Accepted Answer · 2015-05-12T17:30:07.513

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 '15 at 17:30

answered May 12 '15 at 10:32

AmmarCSE

30,079
5
45
53

I still only have the last value of index or i displaying for all buttons. – Laetis May 12 '15 at 10:43
@Laetis, can you reproduce it in a fiddle so I can better assist you? – AmmarCSE May 12 '15 at 11:16
I tried but I am not conforable with this tool, nethertheless all the code is ther: https://jsfiddle.net/Ly5n9jjd/ – Laetis May 12 '15 at 13:19
@Laetis, I have corrected my answer with a working fiddle. – AmmarCSE May 12 '15 at 17:30

add event listener with argument in a loop

1 Answers1