問題分析：當JS文件放在head標簽里中時，並且綁定了onclick事件，就出現了這個錯誤
原因：
W3School中介紹瀏覽器先加載完按鈕節點才執行JS，當瀏覽器自頂向下解析時，找不到onclick綁定的按鈕節點了
如下面這個例子：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>事件</title>
<script>
var Btn = document.getElementById('btn');
Btn.onclick = function(){
console.log("push the button ");
}
</script>
</head>
<body>
<button id="btn">計算</button>
</body>
</html>
就會出現這個這個錯誤，如下圖：
解決辦法一：把JS內容用window.οnlοad=function(){ }包裹起來
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>事件</title>
<script>
window.onload = function () {
var Btn = document.getElementById('btn');
Btn.onclick = function () {
console.log("push the button ");
}
}
</script>
</head>
<body>
<button id="btn">計算</button>
</body>
</html>解決辦法二：把js文件放在底部加載
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>事件</title>
</head>
<body>
<button id="btn">計算</button>
<script>
var Btn = document.getElementById('btn');
Btn.onclick = function () {
console.log("push the button ");
}
</script>
</body>
</html>