Cannot read property 'addEventListener' of null

今天打开页面的时候遇到个问题，Cannot read property 'addEventListener' of null

原因：在页面还没有加载完成后这段监听的js代码已经执行，所以在执行这段代码的时候监听的DOM节点还没有加载创建，所以根本就找不到监听的元素。所以返回null。

解决方法：

1.等待页面完全加载完了再加载这段Js即可；

2.在原生js中的解决方法：

     1.将脚本放在页面的底部。
     2.在加载事件中调用附加代码。
     3.使用jQuery库，它是DOM就绪事件。
什么是jQuery ready事件？
JavaScript提供了在页面呈现时执行代码的加载事件，但是直到所有资源（如图像）都被完全收到为止，才会触发该事件。 在大多数情况下，只要DOM层次结构完全构建，脚本就可以运行。 传递给.ready（）的处理程序保证在DOM准备好后执行，所以这通常是附加所有其他事件处理程序的最佳位置...

下面还有网上的一个解决方法，上边的方法不好用的话，可以试下下面这个方法

JS部分：

html部分：

把js部分的代码加在了如下代码框内。

拓展资料：

js，JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。

因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。