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

您只是将事件监听器添加到最后一个按钮。

将它移到循环中，如下所示：

＆＃13;

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

＆＃13;

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 ]。它并没有破坏你的代码，但绝对值得注意

Javascript - 单击动态创建的元素时提醒内容

2 个答案: