Question

＆＃13;

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

＆＃13;

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

＆＃13;

您可能会或可能不会告诉我，但我刚开始使用Javascript并且正在练习一些概念。

这背后的想法是，当用户点击按钮时，它循环遍历数组并用数组的每个元素替换h1内部文本。但是，当我单击按钮时，替换内部HTML的唯一元素是数组的text [3]，当然这是＆＃34; secret＆＃34;。

为什么会这样？请记住我是Javascript的新手，我还在学习。据我所知，我已经宣布计数器从0开始，并且一旦达到数组的长度就将其调整为停止 - 并且我每次都将其递增1。不知道我在这里做错了什么。请帮忙。

Answer 1

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

你太早停止循环了。它应该是< text.length或<= text.length - 1，而不是< text.length - 1。
在下次传递中更新文本之前，您没有给浏览器重绘元素。您可以使用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，您可能需要进行功能检测以查看要使用的IE。或者，对于您的消息，您可以设置innerHTML而不是设置。
注意避免在循环中创建函数，因为我们只需要一个函数。

Answer 2

这里有两个问题：

1）在你的for循环定义中，你正在检查计数器是否小于text.length-1而不是text.length，这意味着循环正在停止一个与数组末尾相关的元素。< / p>

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

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

这也可以缩短为这种更清洁的形式：

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

Answer 3

试试这个。您的代码中的主要问题是您只是将document.getElementById("heading").innerText替换为数组对象，并且循环变量仅限于text.length - 1。实际上你想做的只是将数组的每个字符附加到元素的innerHTML。这段代码肯定会有效。

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

这是一个有效的例子。

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            document.getElementById("changeText").addEventListener("click", function () {
                document.getElementById("heading").innerText = '';
                var text = ["This", "is", "a", "secret", "message"];
                for (var counter = 0; counter < text.length; counter++) {
                    document.getElementById("heading").innerText += ' ' + text[counter];
                }
            });
        });
    </script>
</head>

<body>

    <h1 id="heading">This heading will change</h1>
    <button id="changeText">change text</button>

</body>

</html>

循环通过数组文本没有响应

3 个答案: