h1 元素文本未使用 javascript 更改，但在控制台中更改

Question

我正在学习 web 开发，我正在尝试在 javascript 中做最简单的事情来了解它是如何工作的。 我有这个问题，页面上的 h1 文本没有改变，但是当我打开控制台时，它每次都会打印更改的值，这是代码（提示，sleep() function 来自互联网，我什么都不知道然而关于它，但它有效）：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST</title>
    <script>
        let counter = 0;
        function sleep(milliseconds) {
        const date = Date.now();
        let currentDate = null;
        do {
            currentDate = Date.now();
        } while (currentDate - date < milliseconds);
}
      function change(){
          while(true)
          {
          document.querySelector("#show").innerText = counter;
          counter++
          console.log(document.querySelector("#show").innerText);
          sleep(1000);
          }
      }  
    </script>
</head>

<body>
    <button onclick="change()" id="button" >COUNT</button>
    <h1 id="show">0</h1>
</body>

</html>

Answer 1

 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TEST</title> <script> function change() { let counter = 0; setInterval(() => { document.querySelector("#show").innerText = counter; counter++; }, 1000); } </script> </head> <body> <button onclick="change()" id="button" >COUNT</button> <h1 id="show">0</h1> </body> </html>

尝试使用 setInterval 更改您的更改 function。 您可以使用https://www.w3schools.com/jsref/met_win_setinterval.asp找到如何使用设置间隔

h1 元素文本未使用 javascript 更改，但在控制台中更改

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-12-07 13:48:43

h1 元素文本未使用 javascript 更改，但在控制台中更改

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-12-07 13:48:43

解决方案1
0 已采纳 2020-12-07 13:48:43