Как постепенно установить каждый элемент из списка как innerHTML / textContent, используя JavaScript? - PullRequest
Новая
       46

Как постепенно установить каждый элемент из списка как innerHTML / textContent, используя JavaScript?

0 голосов
/ 14 мая 2019

Я хочу отображать все элементы из списка в виде innerHTML каждую секунду на моей HTML-странице, используя JavaScript. Вот мой код: 

--------------------HTML--------------------

<text id="firstWoman" class="text" x="380" y="110" fill="red" font-size="56">Mary</text>

--------------------JS--------------------

let W1 = document.getElementById("firstWoman");
let W1_list = ["Mary", "Anne", "Jessica"];

let W1_timeline = setInterval(function(){
    for(let w of W1_list){
        W1.textContent = w;
    }
    if (let w in W1_list> w.length ){
        clearInterval(W1_timeline);
        }
}, 1000);

аналогичный способ тоже не работает: 

let W1 = document.getElementById("firstWoman");
let W1_list = ["Mary", "Anne", "Jessica"];
let w = W1_list[0];

let W1_timeline = setInterval(function(){
        W1.textContent = w++;

    if (let w in W1_list> w.length ){
        clearInterval(W1_timeline);
        }
}, 1000);

Это работает для чисел, но не для строк, по-видимому. Вы знаете, что не так?

1 Ответ

0 голосов
/ 14 мая 2019

В вашем коде есть некоторые ошибки. 

for(let w of W1_list){
    W1.textContent = w;
}

Здесь вы циклически перебираете весь массив W1_list.

Вам необходимо использовать глобальный счетчик, который определяет, чтоэлемент из массива, который вы хотите отобразить.Затем вы можете назначить его текстовому элементу следующим образом: 

W1.textContent = W1_list[counter];

Чтобы очистить таймер, если вы достигли конца массива, вам нужно увеличить счетчик и сравнить его с длиноймассив. 

  if (counter == W1_list.length) {
    clearInterval(W1_timeline);
  }

Вот полный пример: 

let W1 = document.getElementById("firstWoman");
let W1_list = ["Mary", "Anne", "Jessica"];
let counter = 0;
let W1_timeline = setInterval(function() {
  W1.textContent = W1_list[counter];
  counter++;
  if (counter == W1_list.length) {
    clearInterval(W1_timeline);
  }
}, 1000);
<text id="firstWoman" class="text" x="380" y="110" fill="red" font-size="56">Mary</text>
...