Javascript-单击动态创建的元素时警告内容

Question

我有一个代码，其中动态创建了3个按钮元素，创建它们时，我想提醒每个按钮textContent ，但是当我这样做时，只有最后一个元素被警告，其他元素则没有。 这是为什么？

var list = new Array("en", "to", "tre");

for (i=0; i<list.length; i++) {
    button = document.createElement("button");
    button.textContent = list[i]; 
    document.body.appendChild(button)
}

button.addEventListener("click", function () {
  alert(this.textContent);
});

Answer 1

您仅将事件侦听器添加到最后一个按钮。

将其移入循环，如下所示：

 var list = new Array("en", "to", "tre"); for (var i = 0; i < list.length; i++) { button = document.createElement("button"); button.textContent = list[i]; document.body.appendChild(button) button.addEventListener("click", function() { alert(this.textContent); }); } 

Answer 2

对于i每个值， button是不同的。 在循环结束时， button仍然只是最后一个元素。 您应该将事件侦听器放入循环中，如下所示：

var list = new Array("en", "to", "tre");

for (i=0; i<list.length; i++) {
    button = document.createElement("button");
    button.textContent = list[i]; 
    document.body.appendChild(button);

    button.addEventListener("click", function () {
        alert(this.textContent);
    });

}

另外，强烈建议不要使用new Array( a, b, c ) ，请考虑切换到[ a, b, c ] 。 它不会破坏您的代码，但绝对值得一提