如何在 html 标记（如段落）中使用 if 语句显示 for 循环的结果

Posted 2023-05-07

【中文标题】如何在 html 标记（如段落）中使用 if 语句显示 for 循环的结果

【英文标题】：How do i display the outcome of my for loop with if statement in an html tag like a paragraph

【发布时间】：2021-09-27 02:55:05

【问题描述】：

所以第一个 for 循环是我为默认 console.log 使用的循环，第二个是我尝试使用的循环，但遗憾的是没有好的结果。

for (let i = 1; i <= 100; i++) 
    if (i % 15 == 0) console.log("FB");
    else if (i % 3 == 0) console.log("F");
    else if (i % 5 == 0) console.log("B");
    else console.log(i);


for (let i = 1; i <= 100; i++) 
    if (i % 15 == 0) document.getElementById("fizzbuzz").innerhtml = "FB";
    else if (i % 3 == 0) document.getElementById("fizzbuzz").innerHTML = "F";
    else if (i % 5 == 0) document.getElementById("fizzbuzz").innerHTML = "B";
    else document.getElementById("fizzbuzz").innerHTML = i;

<div class="container">
    <h2 class="text-light">Opdracht 2</h2>
    <p class="text-light" id="fizzbuzz"></p>
</div>

【问题讨论】：

究竟是什么不工作？如果您正在等待“100”出现在您的段落中，那将永远不会发生，因为您的代码在最后一个循环中总是会到达 else if (i % 5 == 0)，因为 100 % 5 是 0。

如果我理解，您应该附加到您的#fizzbuzz 元素而不是替换它，例如 document.getElementById("fizzbuzz").innerHTML += "FB"

【参考方案1】：

就像@36ve 在他对您的问题的评论中提到的那样，根据您提供的其他信息，我猜您应该将代码从分配更改为字符串连接。

for (let i = 1; i <= 100; i++) 
    if (i % 15 == 0) document.getElementById("fizzbuzz").innerHTML += "FB ";
    else if (i % 3 == 0) document.getElementById("fizzbuzz").innerHTML += "F ";
    else if (i % 5 == 0) document.getElementById("fizzbuzz").innerHTML += "B ";
    else document.getElementById("fizzbuzz").innerHTML += `$i `;

<div class="container">
    <h2 class="text-light">Opdracht 2</h2>
    <p class="text-light" id="fizzbuzz"></p>
</div>