如何使用getElementById实现多个div区块的显示切换？

我看了你的代码，发现几个导致多区块切换异常的问题，咱们一步步来修复：

问题分析 #

• 重复ID冲突：HTML里多个元素用了同一个ID（比如check3同时给了input和button，script1重复出现），ID是DOM元素的唯一标识，重复会导致getElementById无法正确获取目标元素。
• 函数名与元素ID重名：你的切换函数名（SunMotion、Hologram）和对应区块的ID完全一样，浏览器会把DOM元素ID挂载到全局window对象上，这会和你的函数产生命名冲突，导致函数调用异常。
• 无效的checked操作：你在切换函数里给div元素设置checked属性，但div根本没有这个属性，这行代码不仅无效，还可能引发错误。
• HTML结构不完整：Hologram区块的标签有未闭合的情况（比如grid-container、label标签没闭合），会导致DOM解析混乱。

修复后的完整代码 #

HTML部分 #

<button class="button button1" onclick="toggleSunMotion()"> Motion of the Sun </button>
<button class="button button1" onclick="toggleHologram()"> Hologram Shapes </button>
<br>
<div id="Hologram"> 
  <br> 
  <p> Toggle the switch to run the Hologram program </p> 
  <label class="switch"> 
    <div class="grid-container"> 
      <input id="check12" type="hidden"> 
      <div class="grid-container"> 
        <div class="item1">
          <button id="btn-red" onclick="check12()" data-fileName="red.py">Red</button>
        </div> 
        <input id="check13" type="hidden"> 
      </div>
    </div>
  </label> 
</div>
<br>
<div id="SunMotion"> 
  <p> Toggle the switch to run "24HourCycle.py" </p> 
  <label class="switch"> 
    <input id="check3" type="hidden"> 
    <article> 
      <button class="program" id="btn-sun-cycle" onclick="check3()" data-fileName="24HourCycle.py">24 Hour Cycle</button> 
    </article> 
  </label> 
</div>

JavaScript部分 #

// 初始化隐藏区块
document.getElementById("Hologram").style.display = 'none';
document.getElementById("SunMotion").style.display = 'none';

// 切换太阳运动区块
function toggleSunMotion() {
  var x = document.getElementById("SunMotion");
  if (x.style.display === 'none') {
    x.style.display = 'block';
  } else {
    x.style.display = 'none';
    // 如果需要重置对应input的状态，操作对应的input元素
    // document.getElementById("check3").checked = false;
  }
}

// 切换全息图区块
function toggleHologram() {
  var x = document.getElementById("Hologram");
  if (x.style.display === 'none') {
    x.style.display = 'block';
  } else {
    x.style.display = 'none';
    // 如果需要重置对应input的状态，操作对应的input元素
    // document.getElementById("check12").checked = false;
    // document.getElementById("check13").checked = false;
  }
}

关键优化点说明 #

• 重命名函数：把SunMotion()改成toggleSunMotion()，Hologram()改成toggleHologram()，避免和元素ID冲突。
• 唯一ID：给每个元素分配唯一的ID（比如按钮改成btn-red、btn-sun-cycle），确保getElementById能精准获取元素。
• 修复HTML结构：闭合所有未结束的标签，保证DOM解析正常。
• 移除无效代码：删掉给div设置checked的错误代码，如果需要重置输入框状态，直接操作对应的input元素即可。
• 统一显示状态：切换时统一用block（块级显示），保持逻辑一致，避免inline和block混用可能导致的布局问题。

这样修改后，两个区块的切换就能正常工作了，你可以根据自己的布局需求调整display的属性值（比如flex、inline-block等）。

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