页面加载时随机显示两个默认隐藏元素其一的代码调试问题

我来帮你修复这个问题！你的代码核心问题在于给两个元素都添加了同一个随机生成的类，导致要么两个都显示（当scenario是"c"时），要么两个都隐藏（当scenario是"d"时），完全没实现二选一的效果。

修正后的代码实现 #

我们只需要随机选中其中一个元素，给它单独添加c类即可：

JavaScript 代码

第一种写法（逻辑直观，适合固定两个元素的场景）：

window.addEventListener('load', function() { 
  // 随机决定显示哪个元素
  const showElementA = Math.random() < 0.5;
  
  if (showElementA) {
    document.querySelector(".a").classList.add("c");
  } else {
    document.querySelector(".b").classList.add("c");
  }
});

第二种写法（更灵活，后续新增可选元素也能直接复用）：

window.addEventListener('load', function() { 
  // 获取所有需要随机显示的元素
  const targetElements = document.querySelectorAll(".a, .b");
  // 生成0到元素数量-1之间的随机索引
  const randomIdx = Math.floor(Math.random() * targetElements.length);
  // 给选中的元素添加显示类
  targetElements[randomIdx].classList.add("c");
});

CSS 和 HTML 保持不变

.a, .b {display:none} 
.a.c, .b.c {display:block}

<div class='a'>aaa</div> 
<div class='b'>bbb</div>

为什么这样能解决问题？ #

• 原来的逻辑是给两个元素同步添加同一个类，导致它们的显示状态完全一致；现在的逻辑是只给随机选中的单个元素添加c类，另一个元素保持默认的display:none隐藏状态，完美实现二选一的随机显示效果。
• 第二种灵活写法通过元素集合+随机索引的方式，后续如果需要增加更多可选元素，只需要扩展选择器即可，不用修改核心逻辑。

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