Javascript 为什么HTML在第一次加载时需要双击

为什么我的HTML要求我的按钮，显示我的单选按钮，在我第一次加载页面时双击，但它只是一次单击来切换表单，从显示和隐藏之后。我好像想不出来。 这是我的js函数

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

这是我的HTML。只是想让“麦迪逊”按钮暂时起作用。它完美地加载表单并运行我的php等。当我第一次加载页面时只需要双击，但我希望它是一个简单的单击

    <div class="navbar">
    <div class="dropdown">
    <button class="dropbtn">Campus Locations
    <i class="fa fa-caret-down"></i>
    </button>
<div class="dropdown-content">
    <button onclick="main_hosp()"  class="button" id="huntsville">Huntsville Hospital</button>
    <button onclick="wc_hosp()" class="button" id="wc">Womens and Childrens Hospital</button>
    <button onclick="madison()" class="button" id="madison">Madison Hospital</button>
</div>      
</div>
</div><br>

    <form id="madison_inv"><strong> View Report for:</strong>
    <input type="radio" name="location" value="Total Inv Count" onclick="mad_totinv()">Total Inventory Count</input>
    <input type="radio" name="location" value="Total Narc Count" onclick="mad_totNarc()">Total Narc Count</input>
    <input type="radio" name="location" value="Pyxis Inv Count" onclick="mad_pyxisinv()">Pyxis Inventory Count</input>
    <input type="radio" name="location" value="Pyxis Narc Count" onclick="mad_pyxisnarc()">Pyxis Narc Count</input>
    <input type="radio" name="location" value="Pyxis NonNarc Count" onclick="mad_pyxisnonnarc()">Pyxis NonNarc Count</input>
    <input type="radio" name="location" value="Vault Count" onclick="mad_vault()">Vault Count</input>
            </form> <br>

</article>

校园位置
亨茨维尔医院
妇幼医院
麦迪逊医院


查看的报告：
库存总量
毒品总计数
Pyxis库存盘点
Pyxis麻醉计数
Pyxis非麻醉计数
保险库计数

如果按钮一开始是可见的，你引用的代码是有效的，但你的问题表明它们不是；如果您使用未显示的CSS规则（编辑：）隐藏它们，那么问题是

显示

最初将是

”

（即使它们使用CSS隐藏），因此此逻辑：

var x = document.getElementById("madison_inv");
if (x.style.display === "none") {
    x.style.display = "block";
} else {
    x.style.display = "none";
}

…第一次单击时隐藏。第一次单击后，它将切换

要获取允许CSS的

display

值，您不需要使用

.style

，而是使用

getComputedStyle

（对于过时的IE，返回到

currentStyle

）。在页面设置中：

if (!window.getComputedStyle) {
    // Fallback for obsolete IE
    window.getComputedStyle = function(e) {
        return e.currentStyle;
    };
}

然后

例如：

if（！window.getComputedStyle）{
//过时IE的回退
window.getComputedStyle=函数（e）{
返回e.currentStyle；
};
}
函数madison（）{
var x=document.getElementById（“madison_inv”）；
if（getComputedStyle（x）.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
}

#麦迪逊投资公司{
显示：无；
}

麦迪逊

---

此处的单选按钮。请使用演示问题的按钮更新您的问题，最好是使用堆栈片段（

[]

工具栏按钮；）运行的问题。请注意，单选按钮开始显示，而不是隐藏；你的开场白似乎暗示它们是隐藏的。我在第一次加载时就用CSS隐藏了它#madison_inv{display:none；}仅供参考，您的

标签缺失，只有

出现并且不匹配文章标签就在那里，只是没有复制到那么远。啊。好的，让我快速调整一下。谢谢，很好用。非常感谢。谢谢。改成了切换类。谢谢。我

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