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部分：