javascript - 添加onclick输入

我一直在尝试为我通过JS创建的一组复选框添加onclick事件，但未达到我的期望。

在脚本的最后，在“ checkboxes” div中构建了复选框之后，我希望每个框都使用不同的参数i调用处理程序。看来处理程序都在使用i的当前值，实际上是从使用它的位置开始递增的。

我在这里想念什么???

    function initialize() {
        console.log("enter initialize");
        console.log("create checkboxes");
        for ( i=0; i<4; i++){

            var span1 = document.createElement('span');
            span1.innerHTML = i;

            var cb = document.createElement('input');
            cb.type = "checkbox";
            cb.name = i.toString();
            cb.onclick = function(){myFunction(i);}
            console.log(i, cb.name, cb.onclick);

            var checkboxes = document.getElementById("checkboxes");
            checkboxes.appendChild(span1);
            checkboxes.appendChild(cb);
            console.log("cb="+cb.toString());
        }
    }
    function myFunction(b){
        alert(b);

最佳答案

这是人们常见的范围问题。问题在于，创建函数时的“ i”值与调用函数时设置的“ i”值不同，因此每次被调用时的“ i”始终为3。

解决这个问题的最简单方法是，简单地从元素的“ this”中获取值，例如：

cb.onclick = function(){myFunction(this.name);}

如果您不希望它成为字符串名称，则可以像下面这样设置它：

cb.counter = i;
cb.onclick = function(){myFunction(this.counter);}