点击按钮切换元素可见性异常：仅能隐藏无法显示的问题排查

核心问题 #

你当前的代码是在切换按钮自身的可见性，而非目标段落（<p id="p1Text">）的可见性。一旦按钮被隐藏，就无法再次点击它触发显示操作。另外，element.style.display 仅能读取元素的内联样式，无法获取通过CSS类或外部样式表设置的样式，这也会导致初始判断逻辑失效。

修复方案 #

方案1：直接切换目标段落的display属性

修改JavaScript代码，将操作对象改为目标段落，并通过计算样式判断当前状态：

const button = document.getElementById("button");
const targetPara = document.getElementById("p1Text");

button.onclick = function() {
  // 获取元素实际生效的计算样式
  const currentDisplay = window.getComputedStyle(targetPara).display;
  if (currentDisplay === "none") {
    targetPara.style.display = "block";
  } else {
    targetPara.style.display = "none";
  }
};

方案2：使用CSS类切换（更简洁易维护）

这种方式将样式逻辑放在CSS中，JavaScript仅负责切换类名，符合"样式与逻辑分离"的最佳实践：

CSS代码：

#button {
  display: block;
}
/* 定义隐藏类 */
.hidden {
  display: none;
}

JavaScript代码：

const button = document.getElementById("button");
const targetPara = document.getElementById("p1Text");

button.onclick = function() {
  // 自动切换hidden类的存在状态
  targetPara.classList.toggle("hidden");
};

效果说明 #

两种方案都能实现点击按钮时，切换<p id="p1Text">的显示/隐藏状态，同时保持按钮始终可见，确保你可以重复触发切换操作。方案2的代码更简洁，后续修改样式也只需调整CSS即可。

内容的提问来源于stack exchange，提问作者Pythaes From the Onion patch