如何在HTML段落标签中展示带条件判断的for循环执行结果？

我一眼就看出问题所在啦——你现在的代码每次循环都会完全覆盖<p>标签里的内容，所以循环跑完后，只会显示最后一次循环的结果（也就是100）。

问题根源 #

你用的document.getElementById("fizzbuzz").innerHTML = "XXX"是把元素的内容直接替换成新值，而不是把新内容追加进去。循环执行100次，前面99次的结果都被后面的覆盖了，最后就只剩第100次的输出。

两种可行的解决方案 #

方案1：先收集所有结果，一次性插入（性能更优）

DOM操作是比较消耗性能的，多次修改不如把所有结果先存在数组里，最后一次性插入到页面中：

// 初始化数组存储所有结果
const fizzBuzzResults = [];

for (let i = 1; i <= 100; i++) {
  if (i % 15 === 0) {
    fizzBuzzResults.push("FB");
  } else if (i % 3 === 0) {
    fizzBuzzResults.push("F");
  } else if (i % 5 === 0) {
    fizzBuzzResults.push("B");
  } else {
    fizzBuzzResults.push(i.toString());
  }
}

// 把数组转成带分隔符的字符串，插入到DOM中
document.getElementById("fizzbuzz").textContent = fizzBuzzResults.join(" ");

这里用textContent比innerHTML更安全，因为它不会把内容解析成HTML，避免潜在的XSS风险，而且性能也更好。

方案2：每次循环追加内容

如果想实时追加（虽然这里不需要），可以用+=来拼接内容，记得先清空元素原有内容，避免重复执行时内容叠加：

const fizzbuzzEl = document.getElementById("fizzbuzz");
// 先清空原有内容
fizzbuzzEl.textContent = "";

for (let i = 1; i <= 100; i++) {
  let currentValue;
  if (i % 15 === 0) {
    currentValue = "FB";
  } else if (i % 3 === 0) {
    currentValue = "F";
  } else if (i % 5 === 0) {
    currentValue = "B";
  } else {
    currentValue = i;
  }
  // 追加内容，用空格分隔每个结果
  fizzbuzzEl.textContent += `${currentValue} `;
}

你的HTML结构不需要改动 #

原来的HTML结构完全没问题，保持原样就好：

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

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