Question

我一直在尝试为我通过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);

Answer 1

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

最简单的方法是简单地从元素中获取'this'的值，例如：

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

如果您不希望它是字符串名称，请按照以下方式设置它：

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

Answer 2

仍然有几个属性无法通过您尝试的方式应用。因此，您必须使用较旧的.setAttribute方法。例如，在cb对象上。尝试代替.onClick，试试这个：

cb.setAttribute('onClick','function(){myFunction(i);}');

希望这有帮助！

添加onclick到输入

2 个答案: