iT邦幫忙

1

(詢問求解)javascript 事件監聽問題

https://ithelp.ithome.com.tw/upload/images/20210212/20135134niD5MVwEjK.png

想詢問有關javascript事件監聽為何跑不出來,懇請賜教謝謝!

2 個回答

5
ccutmis
iT邦高手 4 級 ‧ 2021-02-12 08:39:15
最佳解答

不能運行的原因跟網頁渲染的時間軸有關,

可以參考這篇文章: https://ithelp.ithome.com.tw/articles/10197335

如果你開啟chrome的開發者模式應該會看到如下錯誤:

Uncaught TypeError: Cannot read property 'addEventListener' of null

因為頁面的按鈕還沒載入它就執行當然會出錯,上列的文章有提供相關解決方案,例如:

// 放在head區塊偵測DOM是否全部載入
document.addEventListener("DOMContentLoaded", function(){
  // DOM Ready!
});

或者用更簡單的解決方案: 就是把相關程式放到body標籤內最底部的位置,如下所示:

<body>
<button id="btnChange">按鈕</button>
<script>
let btnChange=document.getElementById("btnChange");
function testBtnClick(){
        alert("test");
}
btnChange.addEventListener("click",testBtnClick);
</script>
</body>

這樣程式就能正常運作了。

祝各位邦友 辛丑年學無掛礙,閤家平安! :D

0
leo226
iT邦新手 4 級 ‧ 2021-02-13 12:05:05

將功能放在$(document).ready裡試看看...

$(document).ready(function() {
    //doSomeThing...
});

這個是jQuery的東西,不能直接用/images/emoticon/emoticon03.gif

我要發表回答

立即登入回答