JS显示/隐藏模块问题：OnClick按钮需点击两次才生效求助

问题根源 #

你的代码里，#topsection初始的display: none是定义在CSS样式表中的，但x.style.display只能读取元素的内联样式（即直接写在元素标签上的style属性）。第一次点击按钮时，x.style.display是空字符串，判断条件x.style.display === "none"不成立，会执行x.style.display = "none"——这只是给元素添加了内联的隐藏样式，元素本身还是隐藏状态；第二次点击时，x.style.display的值变成了"none"，才会触发切换为block，所以需要点击两次才生效。

解决方案 #

方案一：使用计算样式判断状态

修改你的JS代码，利用你已经获取的computedStyle来判断元素实际的显示状态：

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

方案二：CSS类切换（更推荐）

这种方式更利于样式维护，避免JS直接操作样式：

1. 修改CSS，新增隐藏类并调整默认样式：

#topsection {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
  display: block;
}

.hidden {
  display: none !important;
}

2. 给初始元素添加hidden类：

<div id="topsection" class="hidden">
  This is a DIV element.
</div>

<div id="section3">
  <button class="togglebutton" onclick="myFunction()">
    <img src="image.png" alt="buttonpng">
  </button>
</div>

3. 简化JS代码，用classList.toggle切换类：

function myFunction() {
  document.getElementById("topsection").classList.toggle("hidden");
}

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