On click variable stays the same after looping through elements

Question

It's a small piece of code, but I can't get it to work. I have a menu which is filled dynamically with javascript, and I add an eventlistener on click for every button. Now every button needs a different function, so I loop through them

var list = $("a");
for (var i=0; i<list.length; i++) {
    $(list[i]).on("click",function(){alert(i);});
}

With this code every button will give me an alert with 5, instead of 1,2,3,... How do I fix this?

use a closure: http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — A. Wolff, Mar 12 '14 at 19:17

score 1 · Accepted Answer · answered Mar 12 '14 at 19:31

1

Use each() that's what it's for:

var list = $("a");
list.each(function(index){
    $(this).on("click", function(){alert(index);});
});

DEMO

answered Mar 12 '14 at 19:31

Wilmer

2,511
1
14
8

score 0 · Answer 2 · edited Mar 12 '14 at 21:26

The value of i changes in the loop, but after the loop is finished the value of i is 5. Whenever you call the alert, it is looking for the variable i, whose value is now 5. You need to store the increment value of i somewhere for each thing. In this example, I give each button an HTML5 data attribute called data-myvalue.

for (var i=0;i<ins.length;i++){
    ins[i].setAttribute('data-myvalue',i);
    ins[i].addEventListener('click',
           function(){alert(this.getAttribute('data-myvalue'));});
}

jsfiddle

But you can also store the information in javascript array.

score 0 · Answer 3 · answered Mar 12 '14 at 19:32

in your html code call a function favbrowser whenever a item is selected using onchange event by writting

<select id="myList" onchange="favBrowser()">
  <option></option>
</select>

and then in javascript do this to print the name of menu item

<script>
function favBrowser()
{
var mylist=document.getElementById("myList");
alert(mylist.options[mylist.selectedIndex].text);
}
</script>

On click variable stays the same after looping through elements

3 Answers3