如何用原生JavaScript实现div显隐？解决首次点击需三次的问题

问题根源 #

• 原代码在按钮的onclick事件中重复绑定click监听器，每次点击按钮都会新增一个监听器，导致逻辑混乱
• 全局变量count的更新时机和监听器触发时机不匹配：首次点击仅执行showMee函数累加count并绑定监听器，但不会触发刚绑定的监听器；后续点击会累积触发多个监听器，最终导致需要三次点击才出现预期效果

修正方案（推荐：基于元素状态判断，无需计数器） #

直接在页面加载完成后给按钮绑定一次click监听器，通过判断元素当前的显示状态切换显隐，逻辑更简洁可靠。

完整代码

HTML

<div id="linkMeOne">
  Hiding me As first time....
</div>

<div id="linkMeTwo">
  Hiding me as well as...
</div>

<input type="button" value="Check Me" id="showMe" />

CSS

#linkMeOne {
  display: block;
}

#linkMeTwo {
  display: block;
}

JavaScript

// 页面加载完成后绑定事件，避免重复绑定
document.addEventListener('DOMContentLoaded', function() {
  const toggleBtn = document.querySelector("#showMe");
  const linkOne = document.querySelector('#linkMeOne');
  const linkTwo = document.querySelector('#linkMeTwo');

  toggleBtn.addEventListener("click", function() {
    // 判断元素当前是否可见
    const isVisible = linkOne.style.display !== 'none';
    // 切换显示状态
    linkOne.style.display = isVisible ? 'none' : 'block';
    linkTwo.style.display = isVisible ? 'none' : 'block';
  });
});

另一种方案（基于计数器，避免重复绑定） #

如果偏好使用计数器逻辑，只需确保监听器只绑定一次，通过奇偶判断切换状态：

let count = 0;
const toggleBtn = document.querySelector("#showMe");
const linkOne = document.querySelector('#linkMeOne');
const linkTwo = document.querySelector('#linkMeTwo');

// 仅绑定一次点击监听器
toggleBtn.addEventListener("click", function() {
  count++;
  if (count % 2 === 1) {
    linkOne.style.display = 'none';
    linkTwo.style.display = 'none';
  } else {
    linkOne.style.display = 'block';
    linkTwo.style.display = 'block';
  }
});

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