Javascript - onclick 事件不起作用

Question

所以我有这段代码:

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

function make_buttons (id) {
    console.log (id);
    var input = document.createElement("INPUT");
    document.getElementById(id).appendChild(input);
    for (var i = 0;i < 10; i++){
        var btn = document.createElement ("BUTTON");
        var t = document.createTextNode (i);
        btn.appendChild(t);
        document.getElementById(id).appendChild(btn).onclick=document.getElementsByTagName("INPUT").value=i;    
    }
};

现在，当我使用 for 循环创建按钮时，它还应该附加 onclick 事件，该事件将 i 的当前值写入我的输入表单。

我编写的代码不会产生任何错误，但是当单击按钮时，它根本不执行任何操作。这是为什么？

新版本:

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 = button_pressed (i);
    }
};

function button_pressed (id) {
    document.getElementById("inp").value += id;
};

Answer 1

方法document.getElementsByTagName()返回 NodeList您应该迭代的集合。您需要循环访问检索到的元素，并将 value 属性分配给每个元素。

这样你就可以改变

document.getElementById(id).appendChild(btn).onclick=document.getElementsByTagName("INPUT").value=i;  

像这样:

var id = 'my-form',
    btn = document.createElement('input');
btn.type = 'button';
btn.value = 'Click me!';
btn.onclick = function() {
    var inputs = document.getElementsByTagName('input');
    // NodeList to Array if needed:
    // var inputsArray = Array.prototype.slice.call(inputs);
    for(var i = 0, l = inputs.length; i < l; i++) {
        inputs[i].value = i;
    }
    return false;
};
document.getElementById(id).appendChild(btn);

DEMO #1

<小时/>

更新:

关于你的第二个问题，是的，它不会以这种方式工作，因为当你的 onclick 事件处理程序被调用时，它使用分配给 i 的最后一个值多变的。为了避免这种情况，你可以使用 closures .

例如，

HTML:

<form action="" id="my-form">
    <input type="text" id="inp" />
</form>

JavaScript:

var btn,
    input,
    form,
    createHandler;
input = document.getElementById('inp');
form = document.getElementById('my-form');
createHandler = function(i) {
    return function() {
        input.value += i;
    };
};
for(var i = 0; i < 5; i++) {
    btn = document.createElement('input');
    btn.type = 'button';
    btn.value = 'Append ' + i;
    form.appendChild(btn);
    btn.onclick = createHandler(i);
}

DEMO #2

您还可以使用立即调用的匿名函数在循环体中创建该闭包:

for(var i = 0; i < 5; i++) {
    // ...
    btn.onclick = (function(theNumberToAppend) {
        return function() {
            input.value += theNumberToAppend;
        };
    })(i);
}

DEMO #3