如何使用 .innerHTML 更新 window 中的文本

Question

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

<!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>

有什么问题？

Answer 1

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

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

您的脚本没有检测到 <div id="counts"> 元素，因为它还没有被加载，您可以通过将脚本移动到 div[=18= 之后来解决这个问题]
因为 innerHTML returns 一个字符串，执行 + 将附加两个字符串，你的秒数看起来像 011111111 所以你必须通过 parseInt(window.seconds.innerHTML)

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

并将脚本标签移动到最底部，应该就可以了

Answer 2

变量 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>

Answer 3

您可以使用以下内容：

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

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

请记住，脚本运行后 'counts' 尚未定义。

如何使用 .innerHTML 更新 window 中的文本

How to update text in window using .innerHTML

html

javascript

var

setinterval