我的HTML按钮的javascript不会第二次切换

时间:2015-01-08 05:42:59

标签: javascript css html5 button toggle

这是我到目前为止:

HTML:

<button id="clockToggle" onclick="toggleClock()">Toggle Clock</button>

CSS:

#clockWidget {
  display:none;
}


的JavaScript:

function enableClock() {
  var clock = document.getElementById("clockWidget");
  clock.style.display="block";
}

function disableClock() {
  var clock = document.getElementById("clockWidget");
  clock.style.display="none";
}

function toggleClock() {
  var clock = document.getElementById("clockWidget");
  if(clock.style.display="none") {
    enableClock();
  }
  else {
    disableClock();
  }
}

我的目标是制作按钮,以便它可以打开和关闭clockWidget。如果可能的话,用JavaScript而不是jQuery回答。

P.S。如果你投票我的问题,至少评论你为什么这样做

3 个答案:

答案 0 :(得分:0)

toggleClock()函数的if语句中,您缺少'=',因此不进行比较,而是设置clock的显示属性。这就是它只调用enableClock()的原因。如果您使用以下内容,它应该按预期工作:

if (clock.style.display == "none") {
    enableClock();
} else {
    disableClock();
}

答案 1 :(得分:0)

你在比较中错过了另一个'=':

if(clock.style.display == "none") {
    enableClock();      
} else {
    disableClock();
}

答案 2 :(得分:0)

$("#clockToggle").click(function(){
  $("#clockWidget").toggle();
});