为什么这段代码不显示饥饿变量？ [关闭]答案

【问题标题】：Why wont this code show the hunger variable? [closed]为什么这段代码不显示饥饿变量？ [关闭]
【发布时间】：2021-06-26 19:45:30
【问题描述】：

有谁知道如何做到这一点，所以每十秒钟饥饿就会减少一。我最大的问题有的是它根本不会表现出饥饿感。

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="styles/style.css" />
  <title>fun</title>
</head>

<body>
  <script>
    var health = 5;
    var hunger = 10;

    function task(i) {
      setTimeout(() {
        hunger -= 1;
      }, 1000 * i);
      document.write("<b>" + hunger + "</b>");
      document.getElementById('hunger-div').innerHTML = hunger;
    }


    for (let i = 0; i < 10; i++) {
      task(i);
    }
  </script>
</body>

</html>

【问题讨论】：

如果要在超时回调中更改 DOM，则必须将更改 DOM 的代码放入超时回调中
您的 Javascript 中有语法错误。 setTimeout(() { 必须是 setTimeout(()=>{ 检查浏览器开发工具的控制台（Windows 上的 F12）。此外，当您在流关闭后使用document.write 时（就像您所做的那样），它会替换您的整个文档。接下来你没有 id="hunger-div" 的元素。
另外，我不知道这是否是完整的代码 sn-p 但您没有 ID 为 hunger-div 的元素，因此您对此“元素”的更改不会做任何事情除了导致错误。

标签： javascript html

【解决方案1】：

您需要有一个带有 id 的 div。此代码递增该值。此外，您不需要同时设置 document.write 和设置 innerHTML。

代码：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles/style.css"/>
    <title>Hunger!</title>
</head>
<body>
    <div id="hunger-div"></div>
    <script>
        var health = 5;
        var hunger = 10;
        function task(i) {
            setTimeout(function() {
                hunger -= 1;
                document.getElementById('hunger-div').innerHTML = `<b>${hunger}</b>`;
            } , 10000 * i);
        }   
    
        for (let i = 0; i<10; i++) {
            task(i);
        }
    </script>
</body>
</html>

【讨论】：

告诉我这是否不是您想要的行为
OP 说他们最大的问题是显示饥饿变量。尽管您的代码显示了它，但它不会随着它的减少而更新。您的回答也没有详细说明 为什么 它有效。关于你需要什么的一句话并不能真正解释它为什么起作用。不一定是错误的答案，只是不是高质量的答案。但是，当问题有 -7 票时，也很难得到高质量的答案。
好的，我明白OP想要什么，会更新答案并解释
好的，这正是我想要的，抱歉造成混乱
我会，但我刚刚为这个网站创建了一个帐户，所以它说它不会显示