javascript - HTML 和 Javascript - 使用循环创建按钮不会 "individualize".onclick = {}

Question

这个问题已经有答案了:

JavaScript closure inside loops – simple practical example (45 个回答)

已关闭 3 年前。

我觉得这个问题已经有了答案，但我找不到它，所以我还是会问一下。

<小时/>

我正在 HTML 中使用 Javascript，我决定使用循环制作一大堆按钮。我想根据每个人的实际情况为其分配一个功能。在这里，我将向您展示脚本:

for (var i = 0; i < 6; i++) {
    var button = document.createElement("button");
    button.innerHTML = i;
    button.className = "buttonclass";
    button.onclick = function() {alert(i)};
    var buttonDiv = document.getElementById("buttons");
    buttonDiv.appendChild(button);
}

但是当我单击任何按钮时，它会返回“6”。我知道问题出在哪里；我不能简单地使用{alert(i)} 。但我应该用什么来代替呢？

Answer 1

如果您被限制使用 var出于浏览器支持的目的，您可以使用函数正确封装其中一些值，以便结果不会提升并设置为 i 的最后一个值。

function generateButtons() {
  var i;
  var buttonDiv = document.getElementById("buttons");
  for (var i = 0; i < 6; i++) {
      generateButton(i, buttonDiv);
  }
}

function generateButton(iteration, container) {
      var button = document.createElement("button");
      button.innerHTML = iteration;
      button.className = "buttonclass";
      button.onclick = function() { alert(iteration); }
      container.appendChild(button);
}

generateButtons();

<div id="buttons"></div>

但是，如果您能够使用更现代的容器，例如 let和 const ，那么您可以保持更简单的结构并利用 block 作用域容器的魔力:

for (let i = 0; i < 6; i++) {
    let button = document.createElement("button");
    button.innerHTML = i;
    button.className = "buttonclass";
    button.onclick = function() {alert(i)};
    let buttonDiv = document.getElementById("buttons");
    buttonDiv.appendChild(button);
}

<div id="buttons"></div>