如何为不同按钮创建独立显示/隐藏元素？解决按钮交互干扰问题

• 全局作用域下重复定义同名函数myFunction：JS对全局同名函数的处理为后定义内容完全覆盖先定义内容，最终浏览器只会执行第二个脚本里编写的、专门操作help2的那个myFunction，两个按钮点击时都会触发操作help2的逻辑，完全无法实现独立控制
• 重复给window.onload赋值：这种原生绑定方式是覆盖式的，后写的onload回调会完全替换先写的回调，最终页面加载时只会执行“隐藏help2”的逻辑，第一个脚本里“隐藏help1”的逻辑根本不会运行
• 函数逻辑硬编码目标元素id：写死查询help1/help2的函数不具备通用性，没法适配多按钮的独立控制需求

1. 编写通用的显隐切换函数 #

把要操作的目标内容id作为参数传入，无需为每个按钮单独写函数：

function toggleContent(targetId) {
  const targetEl = document.getElementById(targetId);
  // 切换显示状态
  if (targetEl.style.display === "none") {
    targetEl.style.display = "block";
  } else {
    targetEl.style.display = "none";
  }
}

2. 调整按钮的点击绑定 #

每个按钮触发函数时传入对应关联内容的id，避免触发逻辑错位：
将原来统一的onclick="myFunction()"替换为对应绑定：

• 关联help1的按钮：onclick="toggleContent('help1')"
• 关联help2的按钮：onclick="toggleContent('help2')"

3. 统一处理页面加载的初始隐藏逻辑 #

放弃重复赋值onload的写法，在一次onload回调里完成所有内容的初始隐藏，避免覆盖失效：

window.onload = function() {
  // 给所有需要初始隐藏的内容块加统一类名，一次性遍历隐藏
  document.querySelectorAll(".toggle-content").forEach(el => {
    el.style.display = "none";
  })
}

调整后的完整代码示例 #

<!-- HTML部分 -->
<button onclick="toggleContent('help1')" style="margin-left:50px;"> Click Here For Help </button> <br><br>
<div id="help1" class="toggle-content"> 
  <p> Help1 对应提示内容 </p>
</div>

<button onclick="toggleContent('help2')" style="margin-left:50px;"> Click Here For Help </button> <br><br>
<div id="help2" class="toggle-content"> 
  <p> Help2 对应提示内容 </p>
</div>

<!-- JS部分 -->
<script>
function toggleContent(targetId) {
  const targetEl = document.getElementById(targetId);
  if (targetEl.style.display === "none") {
    targetEl.style.display = "block";
  } else {
    targetEl.style.display = "none";
  }
}

window.onload = function() {
  document.querySelectorAll(".toggle-content").forEach(el => {
    el.style.display = "none";
  })
}
</script>

后续如果要新增更多按钮和对应内容，只要按照相同模式：新增按钮时传入对应内容的id、给内容块加上toggle-content类即可，不会出现交互干扰的问题

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