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循环(对此不太熟练) )但仍无济于事。另外，如果有帮助，请说明为什么我错了/它不起作用。
最佳答案
您在控制台中看到了预期的结果，因为您显示了 for 循环的每次迭代的 vers。当您在 for 循环中迭代时，i 的值正在减小，并且出现一个新的 vers 值，其中包含 i，已记录。随着 i 减小，每个控制台日志都会显示 vers 的当前值。
当您最终写入 DOM 时，您已经完成了所有 for 循环迭代。此时，vers 的值已稳定为最后一个值，并以“0 瓶”开始。
然后，您的代码将创建一个新字符串，其中以“0 Bottles”开头的 vers 值会重复多次。您将这个大字符串渲染到 DOM。所以你会看到“0 瓶”一遍又一遍地重复。
关于javascript - for 循环在 div 中错误地打印 i，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53335559/