Uncaught TypeError: Cannot set property 'onclick' of null
阿新 • • 發佈：2021-08-12
Uncaught TypeError: Cannot set property 'onclick' of null
未捕獲的TypeError:無法將屬性“onclick”設定為null
問題分析：當JS檔案放在head標籤裡中時，並且綁定了onclick事件，就出現了這個錯誤
原因：W3School中介紹瀏覽器先載入完按鈕節點才執行JS，當瀏覽器自頂向下解析時，找不到onclick繫結的按鈕節點了
報錯程式碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>111</title> <script type="text/javascript"> var add = document.getElementById("a"); add.onclick = function(){ alert("呵呵你個呵呵！！！"); } </script> </head> <body> <a href="javascript:;" id="a">點我</a> </body> </html>
解決方案一：把JS內容用window.οnlοad=function(){ }包裹起來
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>111</title> <script type="text/javascript"> window.onload = function(){ var add = document.getElementById("a"); add.onclick = function(){ alert("呵呵你個呵呵！！！"); } } </script> </head> <body> <a href="javascript:;" id="a">點我</a> </body> </html>
解決方法二：將JS檔案放在底部載入
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>111</title> </head> <body> <a href="javascript:;" id="a">點我</a> <script type="text/javascript"> var add = document.getElementById("a"); add.onclick = function(){ alert("呵呵你個呵呵！！！"); } </script> </body> </html>