Cannot read property 'addEventListener' of null报错的解决办法

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



 

posted @ 2020-08-06 19:52  mernva  阅读(5611)  评论(0)  编辑  收藏  举报