使用原生JavaScript切换Div显隐：按钮二次点击失效问题排查

你的代码存在三个关键问题，导致第二次点击无响应：

1. 事件监听的错误写法 #

你用addEventListener绑定事件时犯了两个错误：

• 事件类型参数应该是'click'，而非'onclick'（addEventListener不需要加on前缀）；
• 第二个参数应传入函数引用myFunction，而不是执行函数myFunction()——后者会在页面加载时立即执行一次函数，而非点击按钮时触发。

这段错误代码不仅没正确绑定事件，还会在页面加载时自动执行一次myFunction，提前改变div的初始显示状态，干扰后续点击逻辑。

2. 重复绑定点击事件 #

你的HTML按钮已经通过onclick='myFunction()'绑定了点击事件，再用addEventListener重复绑定属于冗余操作，甚至可能引发冲突。

3. HTML标签闭合错误 #

你的HTML里<h4>标签用了</span>闭合，属于语法错误：

<!-- 错误写法 -->
<h4 class="text-info">Loading...</span>
<!-- 正确写法 -->
<h4 class="text-info">Loading...</h4>

DOM解析错误可能导致元素获取或操作异常，间接影响功能正常运行。

移除错误的addEventListener代码 #

直接删除这段无效且干扰逻辑的代码：

document.getElementById("btn1").addEventListener('onclick', myFunction());

（补充：你的HTML按钮未设置id="btn1"，这也是一个小疏漏，但不是核心问题）

修正HTML标签闭合 #

<button onclick='myFunction()'>Toggle</button>
<div id="myDIV" style="display: none;">
  <div class="" role="status">
    <h4 class="text-info">Loading...</h4>
  </div>
</div>

优化函数判断逻辑（可选） #

如果想让判断更健壮（兼容非内联样式的情况），可以改用getComputedStyle获取实际生效的样式：

function myFunction() {
  var x = document.getElementById("myDIV");
  var computedStyle = window.getComputedStyle(x);
  if (computedStyle.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

修改完成后，点击按钮即可正常切换div的显示与隐藏。

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