Question

function generer() {

  var antall = Number(document.getElementById('antall').value);
  var drikke = document.getElementById('drikke').value;

  for (let i = antall; i >= 0; i--) {
    vers = i + ' bottles of ' + drikke + ' on the wall <br>' + i + ' bottles of ' + drikke + '<br> If one of those bottles should happen to fall <br><br>';
    console.log(vers);

  }
  document.getElementById('output').innerHTML = vers.repeat(antall);
}

<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8">
  <title>100-bottles</title>
  <script src="script.js"></script>
</head>

<body>
  <input type="text" id="antall" placeholder="Antall vers"><br>
  <input type="text" id="drikke" placeholder="Type drikke"><br>
  <button id="knapp" onclick="generer()">Generer vers</button>
  <div id="output">
    <p>Vers kommer her:</p>
  </div>
</body>

</html>

因此，想法是打印出许多经文和一杯酒，然后重复该经文x（输入）的次数。我的代码做到了这一点，但是，我不知道为什么它会在控制台中正确输出，但是输入的数字在我正在输出的div中始终显示为0。我尝试进行while循环（那不是很熟练））仍无济于事。另外，如果有帮助，请提及为什么我错了/它不起作用。

Answer 1

因为在for循环的每次迭代中显示vers，所以您在控制台中看到了预期的结果。在for循环中进行迭代时，i的值在减小，并且记录了其中包含vers的新值i。每个控制台日志都会显示vers的当前值，随着i的减小而减小。

当您最终写入DOM时，您已经完成了所有的for循环迭代。此时，vers的值已稳定到最后一个值，并且以“ 0瓶”开头。

您的代码然后创建一个新字符串，其中以{0 bottles“开头的vers的值重复多次。您将此大字符串呈现给DOM。这样一遍又一遍地看到“ 0瓶”。

Answer 2

您将继续覆盖变量vers，因此它将仅包含由for循环的上一次迭代生成的版本。之后，您要重复上一次迭代的文本antall并显示它。

您可以执行以下操作，将for循环的每次迭代中生成的值添加到数组中，然后将其合并，之后将其显示在元素中：

function generer() {

  var antall = Number(document.getElementById('antall').value);
  var drikke = document.getElementById('drikke').value;
  var verses = [];

  for (let i = antall; i >= 0; i--) {
    vers = i + ' bottles of ' + drikke + ' on the wall <br>' + i + ' bottles of ' + drikke + '<br> If one of those bottles should happen to fall <br><br>';
    console.log(vers);
    verses.push(vers);
  }
  document.getElementById('output').innerHTML = verses.join("");
}

<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8">
  <title>100-bottles</title>
  <script src="script.js"></script>
</head>

<body>
  <input type="text" id="antall" placeholder="Antall vers"><br>
  <input type="text" id="drikke" placeholder="Type drikke"><br>
  <button id="knapp" onclick="generer()">Generer vers</button>
  <div id="output">
    <p>Vers kommer her:</p>
  </div>
</body>

</html>

循环打印我在div中不正确

2 个答案: