Javascript function with dynamically generated arguments

Question

Below code :

 loop(n times)
    create HTML Button Element
    count++;
    assign onclick event = function(){
                            openSomething("Value_"+count)
                            }

so if i create 3 input elements (n=3) and then go back click any of the three buttons then every time openSomething("Value_"+3) only gets called.

why openSomething("Value_"+1) and openSomething("Value_"+2) does not get called?

I am not sure what is going on may be it the scope issue but i dont know much about scope either, any help to push me in the right direction is much appreciated.

My original code

var count = 0;
   for(var i =0;i<someValue;i++){
        count++;               
        var button = document.createElement("img");
        button.src = "/images/small_button.gif";
        button.imageButton = true;
        button.srcBase = "/images/small_button";
        button.onclick = function () {
                       selectSomething("someIdText_"+count);};            
                       cell.appendChild(button);

    }

I think count are not getting updated by each click event call or have you define count in different function and passing that value to openSomething function? — Arpit Srivastava, Feb 12 '14 at 13:27

score 5 · Accepted Answer · answered Feb 12 '14 at 13:28

5

Because JavaScript doesn't have block-level scoping of variables, and as a result everything is scoped to the function. That means that when you have code that uses a variable (like your loop counter n or your count variable) at a later point (i.e. after the full execution of the function), it will have its value set to the last value for the loop. You need to create a closure (a new scope for the variable) inside of your loop. Something like this (since you didn't post your actual code):

for(var i = 0, l = list.length; i < l; i++) {
    (function(count) {
        something.onclick = function() {
            openSomething("Value_" + count);
        }
    })(i);
}

answered Feb 12 '14 at 13:28

Anthony Grist

38,173
8
62
76

Thank you but if i follow your suggestion when the element gets created and event is assigned it is running the function openSomething automatically which i do not want. – oortcloud_domicile Feb 12 '14 at 13:58
nevermind i found the solution http://stackoverflow.com/questions/1451009/javascript-infamous-loop-issue – oortcloud_domicile Feb 12 '14 at 14:30

score 2 · Answer 2 · answered Feb 12 '14 at 13:33

For a more modern approtce use let, works for firefox, chrome, and node

if you need to target all the browsers, use Anthony approach

for(var count = 0, l = list.length; count < l; count++) {
    let count;
    something.onclick = function() {
        openSomething("Value_" + count);
    }
}

Javascript function with dynamically generated arguments

2 Answers2