Question

代码如下：

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

所以，如果我创建3个输入元素（n = 3），然后再返回三个按钮中的任何一个，那么每次只调用openSomething（“Value _”+ 3）。

为什么openSomething（“Value _”+ 1）和openSomething（“Value _”+ 2）没有被调用？

我不确定发生了什么可能是范围问题，但我也不太了解范围，任何有助于推动我朝着正确方向发展的帮助都非常感激。

我的原始代码

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

    }

Answer 1

因为JavaScript没有变量的块级范围，因此所有内容都限定在函数范围内。这意味着当你有一个代码使用变量（比如你的循环计数器n或你的count变量）稍后（即在完全执行函数之后），它将具有其值设置为循环的 last 值。您需要在循环内部创建一个闭包（变量的新作用域）。这样的事情（因为你没有发布你的实际代码）：

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

Answer 2

对于更现代的approtce使用let，适用于firefox，chrome和node

如果您需要定位所有浏览器，请使用Anthony方法

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

具有动态生成的参数的Javascript函数

2 个答案: