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變量的最后一個值。 為避免這種情況，您可以使用閉包 。

例如，

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