点击按钮实现文本显隐切换，二次点击无法隐藏如何解决？

问题原因 #

• JS代码的if判断中错误使用了赋值运算符=，而非相等判断运算符===，会导致逻辑永远走if分支，永远不会触发隐藏逻辑
• element.style.display只能读取元素行内样式的值，你初始的display: none写在外部CSS文件中，首次触发函数时x.style.display拿到的是空值，判断逻辑会失效

修复方案 #

方案1：class切换（推荐，样式与逻辑分离） #

CSS文件调整为：

.hidden {
  display: none;
}

HTML部分调整，给目标元素初始添加hidden类：

<ul>
  <li>
    <button onclick="myFunction()">Try it</button>
    <div id="myDIV" class="hidden">
      <p>This is my DIV element.</p>
    </div>
  </li>
</ul>

JS代码调整为：

function myFunction() {
  const x = document.getElementById("myDIV");
  x.classList.toggle("hidden");
}

方案2：沿用原有写法，仅修改JS逻辑 #

不需要修改CSS和HTML，直接调整JS代码，获取元素最终生效的样式值做判断：

function myFunction() {
  var x = document.getElementById("myDIV");
  // 读取最终生效的display属性值
  const currentDisplay = window.getComputedStyle(x).display;
  if (currentDisplay === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

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