【點擊觸發無效】[code]js動態綁定click時,為何第2次點擊才會觸發click事件?

用js讓頁面載入時替某按鈕綁定一個click事件,但為何要點擊第2次按鈕才會觸發click裡事的事件呢?

先看代碼:

html :

<div id=’id1′>
這是id1的區塊(頁面載入時預設打開)
</div>
<div id=’id2′>
這是id2的區塊(頁面載入時預設隱藏,點擊才出現)
</div>

<input type=’button’ id =’btn’  value=”按鈕”>

CSS :

#id2{display:none}

Js:

<script>

document.getElementById(“btn”).onclick=function(){

if(document.getElementById(‘id2′).style.display==’none’ {

document.getElementById(‘id1′).style.display=’none’;
document.getElementById(‘id2′).style.display=’block’;
}
else{
document.getElementById(‘id1′).style.display=’block’;
document.getElementById(‘id2′).style.display=’none’;
}
}

</script>

以上代碼執行時,按鈕要點擊到了第2下才能讓兩個div區塊做相互的隱藏展開的切換,為何會這樣呢?

主要是差在if判斷式中的問題,因為第一次點擊時,js抓不到CSS中已經有給id2的display:none的內容,為何抓不到我無法解釋,正常為抓不到display:none所以那個if判斷式中判斷不出有「none」(是空值), 當然第1次點擊就無作用,所以我們可以小小修改一下if裡面的內容,加上一個「或 為空值」,就沒問題了,如下 :

<script>

document.getElementById(“btn”).onclick=function(){

if(document.getElementById(‘id2′).style.display==’none’ || document.getElementById(‘id2’).style.display==” {

document.getElementById(‘id1′).style.display=’none’;
document.getElementById(‘id2′).style.display=’block’;
}
else{
document.getElementById(‘id1′).style.display=’block’;
document.getElementById(‘id2′).style.display=’none’;
}
}

</script>

百度上面有一堆解法也千奇百怪,試了好多都無用,最後自己想出這個加上一個「或為空值」的條件就OK囉!

可以參考demo,可以自行把右邊js裡面的if判斷式刪掉「或為空值」的部分試試,就能心領神會了!

demo : https://codepen.io/jan-kailung/pen/PXeGqy

Facy

我是Facy,浸淫網路行銷多年,凡是網路行銷相關都興趣十足,特別是「關鍵字&內容行銷」! 目前主要是專職部落客、網站接案製作、架站教學,歡迎找我聊聊。

  • 如果您需要討論的話,可以加入FB社團一起交流。
  • 如果您需要更系統性的學習,歡迎參考我的線上課程。

發表迴響