通过按钮 click/function 从数组中打印列表？

Question

所以我添加了一个从数组创建无序列表的按钮 (var list_content = ["Apple", "Banana", "Orange", "Mango" , "Papaya"];), 每个数组项显示为列表项 li 元素。我还将列表附加到 div 目标。

var question4 = document.querySelector('#btn4');
question4.addEventListener('click', switch4);

var listContent = ['Apple', 'Banana', 'Orange', 'Mango', 'Papaya'];

function switch4() {
    var newElement = document.createElement('Li');
    div4.appendChild(newElement);
    for (var i = 0; i < listContent.length; i++) {
        newElement.textContent += listContent[i];
    }
}

然而，当我点击网页上的按钮时，每次点击按钮后都会打印 'AppleBananaOrangeMangoPapaya'。

当我将 for 循环更改为：

 newElement.textContent = listContent[i];

那么打印出来的就是'Papaya'.

我需要按钮在每次单击按钮后分别打印 'Apple'、'Banana'、'Orange'、'Mango' 和 'Papaya'（所以 'Apple' 第一次点击，'Banana' 第二次点击，依此类推）但我不知道该怎么做。

Answer 1

当您在每次单击按钮时循环遍历整个 listContent 数组时，就会发生这种情况。您可以通过添加默认值为 0 的 index 变量并仅在该索引处添加 listContent 元素并使用 post-increment ++ 来解决它，它将继续添加下一个每次点击的元素如下：

var div4 = document.querySelector('#div4');
var question4 = document.querySelector('#btn4');
var index = 0;
question4.addEventListener('click', switch4);

var listContent = ['Apple', 'Banana', 'Orange', 'Mango', 'Papaya'];

function switch4() {
  var newElement = document.createElement('Li');
  newElement.textContent = listContent[index++];
  div4.appendChild(newElement);
}

#div4 {margin-top:10px;}
li {margin: 0 10px;padding: 5px 0;}

<button id="btn4">Click Me</button>
<div id="div4"></div>

Answer 2

试试下面这个：

var question4 = document.querySelector('#btn4');
question4.addEventListener('click', switch4);

var listContent = ['Apple', 'Banana', 'Orange', 'Mango', 'Papaya'];

i = 0;
function switch4() {
    var newElement = document.createElement('Li');
    div4.appendChild(newElement);
    newElement.textContent = listContent[i];
    i++;
    if (i >= listContent.length){
        i = 0;
    }
}

Answer 3

问题

您正在遍历数组并将数组中的所有项目追加到您创建的 li 中。
所以每次单击时，数组中的所有元素都会合并并添加为新的 li 元素

for (var i = 0; i < listContent.length; i++) {
        newElement.textContent += listContent[i]; // --> issue
    }

解决方案

如果您想在每次点击时添加一个元素，您应该添加一个变量来跟踪您添加到列表中的元素。

let startIndex = 0;
function switch4() {

    if(startIndex < listContent.length){
       let newElement = document.createElement('Li');
       div4.appendChild(newElement);
       newElement.textContent = listContent[startIndex];
      startIndex++;

    }

}

通过按钮 click/function 从数组中打印列表？

Printing list from an array through a button click/function?

javascript

arrays

function

button

appendchild

问题

解决方案