【code】[js]點擊觸發無效→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