使用含for循环与条件语句的函数实现FizzBuzz时仅输出最后结果的问题

你的代码核心问题是每次循环都直接覆盖了<p>元素的内容，而非累加所有结果。循环从1到输入数字的过程中，每一轮都会用innerHTML = ...替换掉之前的内容，最终只会显示最后一个数字对应的结果。

修复方案 #

方法1：先拼接所有结果，再一次性渲染 #

先创建数组存储每一轮的结果，循环结束后再把完整内容渲染到页面，这种方式更高效（减少DOM操作次数）：

<label for="num">Enter a number: </label>
<input type="number" id="num" name="num">
<button id="btn">Play</button>
<p id="result"></p>

<script>
  let btn = document.getElementById("btn");
  btn.addEventListener("click", fizzBuzz);

  function fizzBuzz() {
    let number = document.getElementById("num").value;
    let results = [];
    for (let i=1; i<=number; i++) {
       let appendString = "";
       if (i%3 === 0) {
        appendString += "Fizz";
       }
       if (i%5 === 0) {
        appendString += "Buzz";
       }
       results.push(appendString === "" ? i : appendString);
     }
     // 用换行符分隔每一项，也可以换成逗号或空格
     document.getElementById("result").innerHTML = results.join("<br>");
  }
</script>

方法2：循环中追加内容（简单直接） #

如果不想用数组，也可以在循环里通过innerHTML += ...追加内容，但记得每次点击前清空旧结果：

<label for="num">Enter a number: </label>
<input type="number" id="num" name="num">
<button id="btn">Play</button>
<p id="result"></p>

<script>
  let btn = document.getElementById("btn");
  btn.addEventListener("click", fizzBuzz);

  function fizzBuzz() {
    let number = document.getElementById("num").value;
    // 清空之前的结果，避免多次点击叠加
    document.getElementById("result").innerHTML = "";
    for (let i=1; i<=number; i++) {
       let appendString = "";
       if (i%3 === 0) {
        appendString += "Fizz";
       }
       if (i%5 === 0) {
        appendString += "Buzz";
       }
       let currentResult = appendString === "" ? i : appendString;
       document.getElementById("result").innerHTML += currentResult + "<br>";
     }
  }
</script>

关键提示 #

• 优先选方法1，DOM操作本身比较消耗性能，一次性渲染比多次修改DOM更高效。
• 两种方法都能实现从1到目标数字的完整FizzBuzz结果展示，可根据习惯选择。

内容的提问来源于stack exchange，提问作者RamenLover