如何使用 .innerHTML 更新窗口中的文本答案

【问题标题】：How to update text in window using .innerHTML如何使用 .innerHTML 更新窗口中的文本
【发布时间】：2018-08-28 12:18:25
【问题描述】：

我正在制作一个非常简单的页面，它只计算用户打开标签的秒数。在控制台中秒更新，但在浏览器的页面上，它不是。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Counter</title>
    <script type="text/javascript">
      window.seconds = document.getElementById('counts');
      var count = setInterval('counter()', 1000);

      function counter(){
        console.log(seconds)
        document.getElementById('counts').innerHTML = window.seconds + 1;
      }

    </script>
    <style>
      h2 {
        text-align:center;
        color:#032441;
        font-family:monospace;
      }
      div {
        text-align:center;
        color:#032441;
        font-size:70px;
        font-family:monospace;
      }
    </style>
  </head>

  <body>
    <script>
      document.body.style.backgroundColor = "#EBE9BD"
    </script>

    <h2>
      You have been on this page for
    </h2>
    <div id="counts">
      0
    </div>
    <h2>
      seconds.
    </h2>

  </body>
 </html>

有什么问题？

【问题讨论】：

为了改变一个DOM元素的文本，你应该使用innerHTML属性。看看那个，看看你能不能解决这个问题。
在您提供的代码中，您没有更新#counts 的值，这不是语法错误，而是缺少代码。
所以我添加了 document.getElementById('counts').innerHTML = window.seconds + 1;但在浏览器上它只是转到一个然后停止，并且 colsole 每秒更新一次“null”。这是因为我没有更新变量“window.seconds”吗？（代码链接已更新）[更新，我知道了]

标签： javascript html setinterval var

【解决方案1】：

变量seconds 在元素渲染之前就被声明得太早了，这就是为什么我将window.onload 包装器添加到您的代码中。
您需要使用innerHTML 来更改div 元素的内容。
不相关，但您也可以通过 CSS 规则设置 body 标记的样式。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Counter</title>
    <script type="text/javascript">
      window.onload = function () {
        var seconds = document.getElementById('counts');
        var count = setInterval(counter, 1000);

        function counter(){
          var newCount = Number(seconds.innerHTML) + 1
          console.log(newCount);
          seconds.innerHTML = newCount;
        }
      }
    </script>
    <style>
      body {
        backgroundColor: "#EBE9BD";
      }
      h2 {
        text-align: center;
        color: #032441;
        font-family: monospace;
      }
      div {
        text-align: center;
        color: #032441;
        font-size: 70px;
        font-family: monospace;
      }
    </style>
  </head>

  <body>
    <h2>
      You have been on this page for
    </h2>
    <div id="counts">
      0
    </div>
    <h2>
      seconds.
    </h2>
  </body>
</html>

【讨论】：

【解决方案2】：

您可以使用以下内容：

<script type="text/javascript">
    window.seconds = document.getElementById('counts');
    setInterval('counter()', 1000);

    function counter(){
        console.log(seconds.innerHTML);
        window.seconds.innerHTML++;
    }
</script>

请记住，脚本运行后尚未定义“计数”。

【讨论】：

【解决方案3】：

要访问元素的“主体”，您必须通过 element.innerHTML 访问它，在您的情况下看起来像 window.seconds.innerHTML = window.seconds.innerHTML + 1

编辑：但这不会解决您的问题。

您的脚本未检测到 <div id="counts"> 元素，因为它尚未加载，您可以通过将脚本移到 div 之后来解决此问题

如此变化 window.seconds = window.seconds + 1 到 window.seconds.innerHTML = parseInt(window.seconds.innerHTML) + 1;

并将脚本标签移动到最底部，应该是诀窍

【讨论】：

这个：window.seconds.innerHTML = window.seconds.innerHTML + 1 在innerHTML之后追加1