在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解决办法

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

  1. JavaScript中"Uncaught TypeError: Cannot set property 'innerHTML' of null"错误

    写了一个函数,在调用时出错:"Uncaught TypeError: Cannot set property 'innerHTML' of null" 代码如下: <!DOC ...

  2. day01-JavaScript中"Uncaught TypeError: Cannot set property 'innerHTML' of null"错误

    转行学开发,代码100天.初写了最简的一段Js代码,即通过document中的innerHTML方法修改一个<p>标签的内容,报以下错误. -"Uncaught TypeErro ...

  3. JavaScript Uncaught TypeError: Cannot read property 'value' of null

    用 JavaScript 操作 DOM 时出现如下错误: Uncaught TypeError: Cannot set property 'value' of null Uncaught TypeEr ...

  4. 【jQuery学习】用JavaScript写一个输出多选框的个数报错:Cannot set property 'onclick' of null"

    说明:代码段来源于:<锋利的jQuery> 根据代码段我补充的代码如下: <!DOCTYPE html> <html> <head> <meta ...

  5. laydate 日期格式为yyyy 或yyyy-MM时,出现错误Uncaught TypeError: Cannot read property 'length' of undefined

    这个改起比较麻烦,没有深究,简单兼容了yyyy 和yyyy-MM,其他格式可能还是会有错误.替换Dates.check方法. //检测日期是否合法 Dates.check = function(){ ...

  6. 网站开发中使用javascript获取浏览器滚动条宽度

    在网站开发中,有时候需要获取浏览器滚动条的宽度,在武汉蚂蹄软件服务中心的技术人员指导之下,我实现了该需求.记录如下: 首先说明一下原理: ①生成一个div,设置滚动条不可见,记录其宽度: ②将上面的d ...

  7. Android开发中如何解决加载大图片时内存溢出的问题

    Android开发中如何解决加载大图片时内存溢出的问题    在Android开发过程中,我们经常会遇到加载的图片过大导致内存溢出的问题,其实类似这样的问题已经屡见不鲜了,下面将一些好的解决方案分享给 ...

  8. FPGA开发中的脚本语言

    多数FPGA开发者都习惯图形化界面(GUI).GUI方式简单易学,为小项目提供了一键式流程.然而,随着FPGA项目越来越复杂,在很多情况下GUI工具就阻碍了工作效率.因为GUI工具不能对整个开发过程提 ...

  9. WPF 窗体中获取键盘和鼠标无操作时的超时提示

    原文:WPF 窗体中获取键盘和鼠标无操作时的超时提示 通过调用Windows API中的GetLastInputInfo来获取最后一次输入的时间 , , );            timer.Tic ...

  10. 手机浏览器浏览WebApp弹出的键盘遮盖住文本框的解决办法

    手机浏览器浏览WebApp弹出的键盘遮盖住文本框的解决办法 最近碰到Android微信内置浏览H5页面,因为其中的文本输入框(input)放置在靠近页面的中下方,点击文本框以后,则输入框会被弹出的手机 ...

随机推荐

  1. 蜘点云原生之 KubeSphere 落地实践过程

    作者:池晓东,蜘点商业网络服务有限公司技术总监,从事软件开发设计 10 多年,喜欢研究各类新技术,分享技术. 来源:本文由 11 月 25 日广州站 meetup 中讲师池晓东整理,整理于该活动中池老 ...

  2. 5.29 相约杭州!云原生 Meetup 第二期杭州站开启报名

    以容器技术和容器编排为基础的云原生应用,被越来越多的企业用户接受和使用,并且在生产环境中使用容器技术的比例逐年增加.KubeSphere 作为一款面向应用的开源容器混合云,经过 3 年的发展和 10 ...

  3. Machine Learning Week_7 Support Vector Machines

    目录 1 Large Margin Classification 1.1 Optimization Objective 1.1 Logistic Regresson 1.2 Cost 1.3 Supp ...

  4. Machine Learning week_2 Multivariate Prameters Regression

    目录 1 Multivariate Prameters Regression 1.1 Reading Multiple Features 1.2 Gradient Descent For Multip ...

  5. 解密prompt系列41. GraphRAG真的是Silver Bullet?

    这一章我们介绍GraphRAG范式,算着时间也是该到图谱了,NLP每一轮新模型出来后,往往都是先研究微调,然后各种预训练方案,接着琢磨数据,各种主动学习半监督,弱监督,无监督,再之后就到图谱和对抗学习 ...

  6. 从零开始学逆向CTF比赛,免费参加,欢迎来玩!

    大家好,我是轩辕. 告诉大家一个好消息:我准备了一次逆向CTF比赛,面向所有人开放,无需购买课程,优秀的小伙伴还有奖励,参赛方式在文末会介绍,欢迎大家一起来玩. 举办这次CTF比赛,是为了检验大家从零 ...

  7. @Transactional事务,太坑了吧!

    前言 对于从事java开发工作的同学来说,spring的事务肯定再熟悉不过了. 在某些业务场景下,如果一个请求中,需要同时写入多张表的数据.为了保证操作的原子性(要么同时成功,要么同时失败),避免数据 ...

  8. docker REPOSITORY 改名

    创建新的名称: docker tag oldname:tag newname:tag 删除旧的名称: docker rmi oldname:tag

  9. Nuxt.js 应用中的 schema:extend事件钩子详解

    title: Nuxt.js 应用中的 schema:extend事件钩子详解 date: 2024/11/10 updated: 2024/11/10 author: cmdragon excerp ...

  10. [TAD] Triangles of Absolute Differences-反帕斯卡三角形

    [IMO2018] Triangles of Absolute Differences-反帕斯卡三角形 前言 叠甲 笔者不是学数竞的,在此感谢我的数竞生为我讲解题目. 笔者学艺不精,且知识面浅薄. 所 ...