CODEWITHSUNDEEP
javascripthtmlfunction
oortcloud_domicile
oortcloud_domicile

Reputation: 850

Javascript function with dynamically generated arguments

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);

    }

Upvotes: 0

Views: 98

Answers (2)

Endless
Endless

Reputation: 37806

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);
    }
}

Upvotes: 2

Anthony Grist
Anthony Grist

Reputation: 38345

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);
}

Upvotes: 5

Related Questions