Dodałem więc przycisk, który tworzy nieuporządkowaną listę z tablicy (var list_content = ["Apple", "Banana", "Orange", "Mango", "Papaya"];), gdzie każdy element tablicy jest wyświetlany jako lista element li elementu. Dodałem również listę do celu 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];
    }
}

Jednak gdy klikam przycisk na mojej stronie internetowej, po każdym kliknięciu przycisku drukowany jest napis 'AppleBananaOrangeMangoPapaya' .

Kiedy zmienię pętlę for na:

 newElement.textContent = listContent[i];

Wtedy wszystko, co się drukuje, to „Papaya ” .

Potrzebuję przycisku, aby wydrukować osobno „Jabłko”, „Banan”, „Pomarańcza”, „Mango” i „Papaja” osobno po każdym kliknięciu przycisku (więc „Jabłko” przy pierwszym kliknięciu, „Banan” przy drugim naprzód), ale utknąłem na tym, jak to zrobić.

0
Nic Hollowway 2 kwiecień 2020, 15:41

3 odpowiedzi

Najlepsza odpowiedź

Dzieje się tak, gdy przeglądasz pełną tablicę listContent po każdym kliknięciu przycisku. Możesz rozwiązać ten problem, dodając zmienną index o domyślnej wartości 0 i dodając tylko element listContent do tego indeksu i używając post-inkrementacji ++, będzie on dodawać kolejny element po każdym kliknięciu lubić:

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>
0
palaѕн 2 kwiecień 2020, 12:50

Spróbuj tego poniżej:

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
Abhishek Kulkarni 2 kwiecień 2020, 12:50

Problem

Przechodzisz przez tablicę i dołączasz wszystkie jej elementy do tego samego li, które utworzyłeś.
Więc za każdym razem, gdy klikniesz, wszystkie elementy w tablicy są scalane i dodawane jako nowy element li

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

Rozwiązanie

Jeśli chcesz dodać element po każdym kliknięciu, powinieneś dodać zmienną, aby śledzić, który element został dodany do listy.

let startIndex = 0;
function switch4() {

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

    }

}
0
spc 2 kwiecień 2020, 12:50