如何使用javascript逐步将列表中的每个项目设置为innerHTML / textContent？

Question

我希望使用javascript在HTML页面上每隔一秒显示列表中的所有项目作为innerHTML。 这是我的代码：

--------------------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);

这适用于数字但不适用于字符串。 你知道什么是错的吗？

Answer 1

您的代码中存在一些错误。

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>