Печать списка из массива с помощью кнопки / функции? - PullRequest
Новая
       32

Печать списка из массива с помощью кнопки / функции?

0 голосов
/ 02 апреля 2020

Поэтому я добавил кнопку, которая создает неупорядоченный список из массива (var list_content = ["Apple", "Banana", "Orange", "Man go", "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' печатается после каждого нажатия кнопки .

Когда я изменяю для l oop на: 

 newElement.textContent = listContent[i];

Тогда все, что печатается, это 'Папайя' .

Мне нужна кнопка для печати «Apple», «Banana», «Orange», «Man go» и «Papaya» отдельно после каждого нажатия кнопки (поэтому «Apple» при первом нажатии « Банан на втором клике и т. Д.) Но я застрял на том, как это сделать.

Ответы [ 3 ]

0 голосов
/ 02 апреля 2020

Попробуйте это ниже: 

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;
    }
}
0 голосов
/ 02 апреля 2020

Проблема

Вы перебираете массив и добавляете все элементы в массиве к тому же 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++;

    }

}
0 голосов
/ 02 апреля 2020

Это происходит, когда вы просматриваете полный массив listContent при каждом нажатии кнопки. Вы можете решить эту проблему, добавив переменную index со значением по умолчанию 0 и добавив только элемент 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>
...