Question

我正在使用闭包的javascript做一些练习，我已经玩过这个例子，我本来应该创建按钮，然后点击它们提醒他们的号码：

function addButtons(numButtons) {   
    for (var i = 0; i < numButtons; i++) {     
    var button = document.createElement('input');     
    button.type = 'button';     
    button.value = 'Button ' + (i + 1);     
    button.onclick = function() {       
        alert('Button ' + (i + 1) + ' clicked');     
    }(i);  
    document.body.appendChild(button);
    document.body.appendChild(document.createElement('br'));   
    } 
}; 

addButtons(5);

但是，在页面加载时，脚本甚至在创建按钮号之前就会发出警告，为什么会这样呢？我试过像这样交换addEventListener的onclick方法：

button.addEventListener("click", function () {   
        alert('Button ' + (i + 1) + ' clicked');     
}(i));

但结果是一样的。

Answer 1

删除调用：

button.onclick = function() {       
    alert('Button ' + (i + 1) + ' clicked');     
}(i);   // here: (i)

更改为：

button.onclick = function() {       
    alert('Button ' + (i + 1) + ' clicked');     
}

你自己在调用fn;）

Answer 2

从最后一个函数中删除（）以避免自我调用。

您可以添加自定义字段并从那里获取文本。请尝试以下操作：

function addButtons(numButtons) {   
    for (var i = 0; i < numButtons; i++) {     
    var button = document.createElement('input');     
    button.type = 'button';     
    button.value = 'Button ' + (i + 1); 
    button.number=i+1;
    button.onclick = function() {       
        alert(this.number);     
    };  
    document.body.appendChild(button);
    document.body.appendChild(document.createElement('br'));   
    } 
}; 
addButtons(5);

Javascript - 在没有先调用它的情况下调用onclick函数

2 个答案: