网页开发中使用javascript语言时浏览器操作时弹出错误:Uncaught TypeError: Cannot set property 'onClick' of null。

  在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是一个事件,当文档加载完成之后就会触发该事件,可以为此事件注册事件处理函数,并将要执行的脚本代码放在事件处理函数中,于是就可以避免获取不到对象的情况。window.οnlοad=function(){},使用此种方式为window.onload事件绑定事件处理函数,这里绑定的是一个匿名函数,当然也可以绑定非匿名函数。

  二、可以使用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);
    };
}
复制代码

 

参考链接:

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

2、Uncaught TypeError: Cannot set property 'onclick' of null onclick not working

3、Uncaught TypeError: Cannot set property 'onclick' of null解决办法

 

posted @   rainbow70626  阅读(626)  评论(1编辑  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· 终于写完轮子一部分:tcp代理 了,记录一下
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
历史上的今天:
2015-08-11 c#动态加载卸载DLL的方法
2015-08-11 C++与C#互调dll的实现步骤
点击右上角即可分享
微信分享提示