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中删除该按钮并将其重新插入正文的末尾。

请改为尝试：

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

Answer 2

您只创建了一个新元素。试试这个。

var btn = document.getElementById("btn");
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++){
    var option = document.createElement("button");
    option.innerHTML = optionText[i];
    document.body.appendChild(option);
  }
}

基本上移动document.createElement("button")循环中的for会为数组中的每个项目创建一个新元素。

如何在JavaScript中添加带循环/单击事件的多个按钮？

2 个答案: