<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//根據id屬性的值從文檔中獲取這個元素
var btnObj=document.getElementById("btn");
//為當前的這個按鈕元素(對象),注冊點擊事件,添加事件處理函數 (匿名函數)
btnObj.onclick=function(){
//響應做的事情
alert("jaja");
};
</script>
</head>
<body>
<input type="button" value="顯示效果" id="btn" />
</body>
</html>
上面代碼執行后，顯示
進行更改，需要把js文件放在底部加載：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="顯示效果" id="btn" />
<script>
//根據id屬性的值從文檔中獲取這個元素
var btnObj=document.getElementById("btn");
//為當前的這個按鈕元素(對象),注冊點擊事件,添加事件處理函數 (匿名函數)
btnObj.onclick=function(){
//響應做的事情
alert("jaja");
};
</script>
</body>
</html>
代碼正常執行
原因：當js文件放在head里面時，如果綁定了onclick或者onmouseover事件，就會出現如上圖類似的錯誤，是因為瀏覽器的加載你寫的html文檔的順序是從上往下，加載完按鈕節點才執行的js，所以當瀏覽器自頂向下解析時，找不到onclick綁定的按鈕節點，於是報錯。
解決辦法：第一，把js文件放在底部加載；第二，使用window.onload=function(){}包裹js內容。