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
– Arpit Srivastava, Commented Feb 12, 2014 at 13:27

Anthony Grist · Accepted Answer · 2014-02-12 13:28:18Z

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, 2014 at 13:28

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

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

2 Comments

oortcloud_domicile Over a year ago

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 Over a year ago

nevermind i found the solution stackoverflow.com/questions/1451009/…

Endless · Accepted Answer · 2014-02-12 13:33:29Z

2

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

answered Feb 12, 2014 at 13:33

Endless

38.8k14 gold badges118 silver badges138 bronze badges

Collectives™ on Stack Overflow

Javascript function with dynamically generated arguments

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related