Cannot read property 'addEventListener' of null報錯的解決辦法
阿新 • • 發佈:2020-08-06
在做百度前端學院IFE2015任務二時,複習一道程式碼題,程式碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>task002</title> <script type="text/javascript" src="task002.js" ></script> </head> <body> <div> <input id="number1" type="text"> <input id="number2" type="text"> <span id="result"></span> <button id="addbtn">點選一下</button> </div> </body> </html>
js程式碼:
function $(id){ return document.getElementById(id); } function add(num1,num2){ return num1+num2; } function renderResult(result){ $("result").innerHTML=result; } function addEventHandle(){ var num1 =$("number1").value; var num2 =$("number2").value; var result=add(num1,num2); renderResult(result); } function initEvent(){ $("addbtn").addEventListener("click",addEventHandle,false); } initEvent()
執行時老是提示Cannot read property 'addEventListener' of null,檢視程式碼沒啥問題,查閱資料發現原因:
在頁面沒有載入完成時,這段監聽的js程式碼已經執行完畢,所以在執行這段程式碼時監聽的DOM節點還沒有建立,所以找不到監聽元素,只能返回null
解決辦法:
1.等待頁面載入完成時,再執行js程式碼。
2.在原生js中,將指令碼放在底部
本文中將<script type="text/javascript" src="task002.js" ></script>放到</body>前面
3.使用JQuery庫,它是DOM就緒事件。
總結:1.一般建議將js程式碼放在頁面底部,</body>之前
2.引入外部js格式:<script type="text/javascript" src="xx.js"></script>
3.引入外部css格式:<link rel="stylesheet" href="xx.css" type="text/css">
參考資料:https://blog.csdn.net/lzrit/article/details/81589548