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

Javascript - onclick事件无效

1 个答案:

更新