对于循环HTML/JS，每周降序数字

Question

我正在尝试Loop，我遇到了一个问题。所以这里的目标是在7周内体重下降10%。我对每周的体重减轻有一个问题，因为你可以看到它只显示每周的最终体重。我哪里错了？遗漏了什么？蒂娅！

​

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Weight loss</title>
</head>

<body>
  <form>
    <p>
      <label> Weight: </label>
      <input type="text" id="stWeight" size="5">
    </p>
    <p>
      <input type="button" value="Goal weight" onclick="showGoal()">
    </p>
  </form>

  <div id="answer"></div>
  <script>
    function showGoal() {

      var stWeight = Number(document.getElementById("stWeight").value);
      var wklyLoss = stWeight * 0.1 / 7;
      var text = "";
      for (var i = 1; i <= 7; i++) {

        weight = stWeight - wklyLoss;


        text += i + ". week " + weight.toFixed(2) + "<br>";


      }

      document.getElementById("answer").innerHTML = "<p>" + text + "</p>";
    }
  </script>
</body>

</html>

​

Answer 1

实际上，您每次都在执行相同的calcul。(起始权重减一个weeklyLoss )

在循环之前，使用stWeight值初始化"weight“变量，然后在循环中执行以下操作，而不是实际的calcul；

weight -= wklyLoss;

因此每次迭代权重都会降低。

Answer 2

这只是一个数学问题，你可能想要在循环中解决

​

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Weight loss</title>
</head>

<body>
  <form>
    <p>
      <label> Weight: </label>
      <input type="text" id="stWeight" size="5">
    </p>
    <p>
      <input type="button" value="Goal weight" onclick="showGoal()">
    </p>
  </form>

  <div id="answer"></div>
  <script>
    function showGoal() {

      var stWeight = Number(document.getElementById("stWeight").value);
     
      var text = "";
      for (var i = 1; i <= 7; i++) {
        var wklyLoss = stWeight * 0.1 / (8-i);
        weight = stWeight - wklyLoss;


        text += i + ". week " + weight.toFixed(2) + "<br>";


      }

      document.getElementById("answer").innerHTML = "<p>" + text + "</p>";
    }
  </script>
</body>

</html>

​