通过按钮单击/功能从数组打印列表？

Posted 2023-02-22

【中文标题】通过按钮单击/功能从数组打印列表？

【英文标题】：Printing list from an array through a button click/function?

【发布时间】：2020-07-14 10:32:57

【问题描述】：

所以我添加了一个按钮，用于从数组（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”单击等等），但我不知道该怎么做。

【参考方案1】：

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

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>

【参考方案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;
    

【参考方案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++;