Uncaught TypeError: Cannot set property 'onClick' of null。

最新推荐文章于 2021-10-19 17:16:54 发布

置顶王大锤子呦

最新推荐文章于 2021-10-19 17:16:54 发布

阅读量1.3w

点赞数 5

分类专栏： HTML5 文章标签： js HTML5

本文链接：https://blog.csdn.net/darongzi1314/article/details/51436621

版权

HTML5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了如何解决JavaScript中点击事件无法正常工作的常见问题。通过调整脚本执行时机，确保DOM元素加载完毕后再绑定事件，避免了因元素未就绪而导致的错误。提供了两种有效的方法：一是使用`window.onload`确保页面加载完成；二是利用`addEventListener`和`attachEvent`跨浏览器绑定事件。

摘要由CSDN通过智能技术生成

在Chrome浏览器下，遇到了这个错误提示：Uncaught TypeError: Cannot set property 'onClick' of null。

先贴一下JS的代码

document.getElementById("#register button").onclick=function(){
    alert('222');
}

后来查了是因为我的JS文件引入的顺序比标签加载的早，so,把js文件的引入放到了body下，但是依然报错。多处查询后，解决办法如下：

网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况，为了避免这种情况的发生，可以使用以下两种方式:通过window.onload来执行脚本代码。window.onload是一个事件，当文档加载完成之后就会触发该事件，可以为此事件注册事件处理函数，并将要执行的脚本代码放在事件处理函数中，于是就可以避免获取不到对象的情况。1：window.οnlοad=function(){}，使用此种方式为window.onload事件绑定事件处理函数，这里绑定的是一个匿名函数，当然也可以绑定非匿名函数。2：可以使用addEventListener()和attachEvent()为onload事件绑定事件处理函数，addEventListener()是当前标准的一种事件处理函数绑定方式，但是IE8和IE8以下的浏览器并不支持此方式(addEventListener("type",函数名,false))。

这时用第一种方法就可以解决问题，如果要处理多个事件的绑定，要用第二种方法

//方法一：

window.onload = function () {
    document.getElementById("register").onclick=function(){
        alert('222');
    }
}

//方法二：（支持各大浏览器）

//方法二
if(window.addEventListener){
    window.addEventListener("load",alert1,false);
    window.addEventListener("load",alert2,false);
}
else{
    window.attachEvent("onload",alert1);
    window.attachEvent("onload",alert2);
}

function alert1(){
    document.getElementById("register").onclick=function () {
        alert('测试1');
    };
}

function alert2(){
    document.getElementById("register").onclick=function () {
        alert('测试2);
    };
}