页面首次加载时HTML按钮需双击显示单选框问题求助

嘿，这个问题我之前碰到过类似的，核心原因是你初始隐藏表单的方式和JS里的判断逻辑不匹配，咱们一步步理清楚：

问题根源 #

你的JS函数里通过x.style.display === "none"来判断表单是否该显示，但element.style.display只能读取元素的内联样式（也就是写在标签style=""属性里的样式）。如果madison_inv表单是通过外部CSS或者<style>标签设置display: none来默认隐藏的，那首次加载时x.style.display的值是空字符串""，而非"none"。

这就导致第一次点击按钮时，条件x.style.display === "none"不成立，代码会执行else分支把表单设为display: none——等于啥都没做；第二次点击时，因为已经有了内联的display: none，条件才成立，表单才会正常显示出来。

两种快速解决方案 #

方案1：修改JS函数，兼容初始无内联样式的情况 #

把判断逻辑改成同时检查空值，或者用getComputedStyle获取实际生效的样式：

简化版（兼容空值）

function madison() {
  var x = document.getElementById("madison_inv");
  // 空值代表初始是通过CSS隐藏的
  if (x.style.display === "none" || x.style.display === "") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

更可靠版（获取计算后的样式）

如果表单的显示状态可能被其他CSS规则影响，用getComputedStyle能拿到实际生效的display值：

function madison() {
  var x = document.getElementById("madison_inv");
  var actualDisplay = window.getComputedStyle(x).display;
  if (actualDisplay === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

方案2：给表单添加内联的初始隐藏样式 #

直接在HTML的form标签里加上style="display: none"，这样首次点击时x.style.display就是"none"，逻辑直接生效：

<form id="madison_inv" style="display: none">
  <strong> View Report for:</strong>
  <!-- 单选框代码保持不变 -->
</form>

额外建议 #

记得检查另外两个医院按钮（Huntsville和Women's）的JS函数，如果它们的逻辑和madison()一致，也会出现同样的首次双击问题，建议统一修改哦～

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