在做百度前端學院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