Question

所以我有这段代码：

window.onload = function () {make_buttons ('calc'); }

function make_buttons (id) {
    var input = document.createElement("input");
    input.type = 'text';
    input.id = 'inp';
    document.getElementById(id).appendChild(input);
    for (var i = 0;i < 10; i++){
        var btn = document.createElement ("button");
        btn.id = i;
        var txt = document.createTextNode (i);
        btn.appendChild(txt);
        var make_btn = document.getElementById(id).appendChild(btn);
        make_btn.onclick = document.getElementById("inp").value += i;
    }
};

因此，当我加载页面时，从1到9的所有数字都会打印到我的文本字段中。但是，只有当我点击它时才会在文本字段中添加一个数字，因为onclick事物。

我如何克服这个问题？

Answer 1

你有几个问题：

您必须为onclick分配一个函数引用，而不仅仅是一个语句（使用事件监听器会更好）。
如果没有将它包装在闭包中，你的循环变量将不是正确的值，因为在实际执行事件处理程序之前你的for循环已经运行完毕。

您可以将其更改为：

function make_buttons (id) {
    var parent = document.getElementById(id);
    var input = document.createElement("input");
    input.type = 'text';
    input.id = 'inp';
    parent.appendChild(input);
    for (var i = 0;i < 10; i++){
        var btn = document.createElement ("button");
        btn.innerHTML = i;
        btn.id = i;
        parent.appendChild(btn);
        // wrap in a closure created by an 
        // IIEF (immediately invoked function expression) to capture 
        // the value of i uniquely for each event handler
        (function(index) {
            btn.onclick = function() {
                input.value += index;
            }
        })(i);
    }
};

有关IIFE的更多信息，请参阅this reference。

仅供参考，修正和简化摘要：

仅获取document.getElementById(id)一次并将结果保存在变量中。
使用btn.innerHTML而不是创建文本节点。
使用btn而不是创建新变量make_btn。
使用事件处理程序中的input变量，而不是再次找到它。
创建IIEF（立即调用函数表达式）以分别为每个事件处理程序捕获i的值，以便它们不会在结尾处具有相同的值i。 for循环。

Answer 2

make_btn.addEventListener("click", (function(i){
    return function(){
        document.getElementById("inp").value += i;
    };
})(i));

Javascript - 循环使onclick事件发生而没有“点击”

2 个答案: