javascript - 如何在 JavaScript 中使用 for 循环/单击事件添加多个按钮？

Question

我正在尝试使用 JavaScript 动态添加 4 个带有不同文本的按钮。基本上，当人们点击初始按钮时，会弹出另外 4 个按钮。

每个按钮中显示的文本都来自一个数组，问题是当我单击按钮时，只有一个按钮是用数组中最后一个字符串中的文本创建的。

我做错了什么？

这是我使用的代码:

var btn = document.getElementById("btn");
var option = document.createElement("button");
var optionText = ["Button 1", "Button 2", "Button 3", "Button 4"];

btn.addEventListener("click", function(){
  buttonSelect();
})

function buttonSelect() {
  for(var i = 0; i < optionText.length; i++){
    document.body.appendChild(option);
    option.innerHTML = optionText[i];
  }
}

Answer 1

您只是创建一个按钮，然后一遍又一遍地附加它。 appendChild 不会复制您创建的按钮，它会从原来的位置获取它，然后将其重新附加到您指定的位置。因此，当您使用 document.body.appendChild(option) 时，它会从 DOM 中删除按钮，然后将其重新插入到 body 的末尾。

试试这个:

function buttonSelect() {
  for(var i = 0; i < optionText.length; i++){
    var option = document.createElement("button");
    document.body.appendChild(option);
    option.innerHTML = optionText[i];
  }
}