Javascript 函数需要2次单击才能显示隐藏的div

我有一点javascript用于显示和隐藏div

function hidefooter(){
var button = document.getElementById('footerbutton');

button.onclick = function() {
    var div = document.getElementById('footerbox');
    if (div.style.display !== 'block') {
        div.style.display = 'block';
    }
    else {
        div.style.display = 'none';
    }
};
}

div启动{display:none；}。我在网上四处寻找，只发现有人说这是一个html的东西。我的问题是，当我第一次编写它时，“块”和“无”值被切换，需要点击3下才能工作。任何帮助都会很好

更新：更好的解释。这段代码正是我想要的，但你必须点击两次才能得到效果。起初，我切换了“block”和“none”属性，只需点击3次就可以让它工作。页脚以{display:none；}开头。我把它放在网上，好让朋友看看。网址是。单击右侧的紫色脚按钮

更新2：问题是我调用了onClick两次。这是简化的工作版本

function hideFooter(){

var div = document.getElementById('footerbox');
if (div.style.display !== 'block') {
    div.style.display = 'block';
}
else {
    div.style.display = 'none';
}
};

---

谢谢大家的评论和建议。

您需要在页脚样式中添加“显示：无”

您可以对Firefox、Opera、Safari和Chrome使用

window.getComputedStyle（elem）

，对IE使用

elem.currentStyle

var button = document.getElementById('footerbutton');

button.onclick = function() {
    var div = document.getElementById('footerbox');
    var style = window.getComputedStyle(div);
    if (style.display !== 'block') {
        div.style.display = 'block';
    }
    else {
        div.style.display = 'none';
    }
};

---

只需删除用于定义处理事件的按钮的代码，并将onClick（）事件添加到按钮即可 此代码将按照您的需要工作

函数hidefooter（）{

}

但请确保按钮代码如下所示：

隐藏页脚

注意onClick=“hidefooter（）”

并确保您的div仍然

display:none

我相信问题在于，您正在使用“隐藏”按钮定义它的功能，然后执行隐藏工作。您应该添加一个调用hidefooter（）函数的事件处理程序，该函数除了页脚隐藏代码外没有任何内容。
您在此处添加了两次click事件


首先，您正在调用
onClick
event on按钮
在函数中定义了
button.onclick=function（）{…}

删除
button.onclick=function（）{}
并如下使用：

函数hidefooter（）{

这里是问题所在
请记住，在使用JS设置样式之前，它不会包含CSS属性（首先是空的）。你需要getComputedStyle。删除了我的答案，原来的代码运行良好，真的应该首先测试：）@cbuckley，谢谢，你安装的JSFIDLE工作正常，所以我会去看看我的标记，看看是否有什么。它已经存在了。这是我在代码下面的注释中提到的第一件事.inline onclick handler？你一定是在开玩笑吧。嘿，谢谢你给我指明了正确的方向。我把工作代码贴在了上面，它和你写的不太一样，但思路是一样的。
var div = document.getElementById('footerbox');
if (div.style.display !== 'block') {
    div.style.display = 'block';
}
else {
    div.style.display = 'none';
}

var button = document.getElementById('footerbutton');
var div = document.getElementById('footerbox');

if (div.style.display != 'block') {
    div.style.display = 'block';
}
else {
    div.style.display = 'none';
}