JavaScript如何解决报错 Uncaught TypeError Cannot read property ‘addEventListener’ of null()

JavaScript如何解决报错 Uncaught TypeError Cannot read property ‘ addEventListener’ of null?
一、解决办法1、首先检查你的JS代码,如getElementById中的ID参数是否写错了。
【JavaScript如何解决报错 Uncaught TypeError Cannot read property ‘ addEventListener’ of null()】2、若ID没写错,查看你的JS代码在HTML文件中的位置,如果在head中,则可能会报这个错误,第一个解决办法是将JS代码或者引用方式放在body标签底部:

< body>< button id="login">登录< /button>< script src="http://www.srcmini.com/js/09.js">< /script> < /body>

第二个解决办法是:在JS代码中添加:
// onload表示等待页面所有内容加载完毕执行onload方法 window.onload = function(){ // 添加你的代码 }

二、问题解释产生这个问题的原因是因为html元素还没加载完毕就使用JavaScript操作对应的元素了,一个HTML文档包括HTML元素、CSS样式、JS脚本,不管它们在HTML文档中的位置如何,浏览器都是从头部到尾部的顺序解释的,先解释到的内容先执行。例如在HTML的head标签中放置JS代码,则该JS代码会先于下面的HTML元素先解释执行,如果没有使用window.onload函数,则里面的JS代码会立即执行。
一般来说会推荐将JS的引入放在body标签底部,这是因为将body内的所有元素解释完了就可以立即执行JS代码了了,但是放在window.onload中则需要完全加载完页面的所有资源才能执行,例如一张图片过大的话,加载一张图片需要很长时间,但是页面已经显示出来了,JS代码此时还不能执行,需要等待图片加载完毕。
综上所述,如果加载一个资源非常耗时的话,就使用window.onload方法,如果需要即时运行的话,就将JS代码放到body标签底部。

    推荐阅读