通过阵列文本循环不响应

Question

document.getElementById("changeText").addEventListener("click", function(){
  var text = ["This", "is", "a", "secret", "message"];
  for (var counter=0; counter < text.length-1; counter++) {
  document.getElementById("heading").innerText = text[counter];
  }
});

<h1 id="heading">This heading will change</h1>
<button id="changeText">change text</button>

您可能会说也可能无法分辨，但我只是从JavaScript开始，正在练习一些概念。

此背后的想法是，当用户单击按钮时，它可以通过数组循环并用数组的每个元素替换H1内文本。但是，当我单击按钮时，替代内部HTML的唯一元素是数组的文本[3]，当然是"秘密"。

为什么会发生这种情况？请记住，我是JavaScript的新手，并且仍在学习。据我所知，我已经声明了计数器从0开始，并在达到数组的长度时将其停止，并每次将其递增。不知道我在这里做错了什么。请帮助。

Answer 1

该代码中有两个单独的问题：

1. 您正在太早停止循环。它应该是 < text.length或 <= text.length - 1，而不是 < text.length - 1。

2. 您没有给浏览器一个重新绘制元素的机会，然后再在下一个通行证上更新其文本。您可以使用setTimeout来做到这一点。

这是处理两者的示例，请参见***注释：

// *** A function we use to update the text
function updateText(el, thisText) {
  el.textContent = thisText;
}
document.getElementById("changeText").addEventListener("click", function(){
  var text = ["This", "is", "a", "secret", "message"];
  // *** Look up the element *once*
  var el = document.getElementById("heading");
  // *** Use "< text.length"
  for (var counter=0; counter < text.length; counter++) {
    // *** Schedule a timed callback
    setTimeout(
      updateText,       // *** The function to call
      counter * 500,    // *** Delay before calling, each is 500ms later than previous
      el, text[counter] // *** Arguments for the timer to pass the function
    );
  }
});

<h1 id="heading">This heading will change</h1>
<button id="changeText">change text</button>

上面还有其他更改：

• textContent而不是innerText。如果支持较旧的IE，则可能需要功能检测才能查看要使用哪个。或为您的邮件，您可以摆脱设置innerHTML。
• 注意避免在循环中创建功能，因为我们只需要一个。

Answer 2

您在这里有两个问题：

1）在您的循环定义中，您正在检查计数器是否小于text.length-1而不是text.length，这意味着循环在数组末端停止一个元素。

2）在for循环中，您要替换整个标题，而不是附加到它上。因此，标题一次设置为每个单词，一次都设置为一个单词，但是它运行得如此之快，以至于您只看到了最后一次迭代。将for循环内部的线更改为：

document.getElementById("heading").innerText = document.getElementById("heading").innerText + text[counter];

这也可以将其缩短到此清洁形式：

document.getElementById("heading").innerText += text[counter];