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标签底部。
推荐阅读
- 如何查看win7d的ip地址()
- javascript中所有if else 和 else if的区分和解决
- javascript怎么截取指定字符串(分别有哪些方式?)
- JavaScript如何实现字符串类型和数字类型的互相转换(分别有哪些转换方式?)
- JavaScript的函数参数和arguments是什么()
- 为什么在JavaScript中不推荐使用for…in()
- 如何在JavaScript的回调中正确地访问“this”()
- JavaScript中如何验证邮箱地址()
- javascript如何更简单地在指定索引位置插入一个字符串()