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

Question

So I have this piece of code:

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;
    }
};

So when I load the page, all the numbers from 1 to 9 are printed into my text field. But adding a number in the text field should only happen when I click it because of the onclick thing.

How can I overcome this issue?

Answer 1

You have a couple problems:

1. You must assign a function reference to onclick not just a statement (using an event listener would be even better).
2. Your loop variable will not be the proper value without wrapping it in a closure because your for loop has run to completion BEFORE the event handler is actually executed.

You can change it to this:

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);
    }
};

See this reference for more info on the IIFE.

FYI, summary of fixes and simplifications:

1. Fetches document.getElementById(id) just once and saves the result in a variable.
2. Uses btn.innerHTML instead of creating a text node.
3. Uses btn instead of creating a new variable make_btn .
4. Uses the input variable in the event handler instead of finding it again.
5. Creates the IIEF (immediately invoked function expression) to capture the value of i separately for each event handler so they don't all have the same value i has at the end of the for loop.

Answer 2

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