【报错】(Javascript):Cannot set property 'onclick' of null

最新推荐文章于 2022-06-07 14:30:45 发布
最新推荐文章于 2022-06-07 14:30:45 发布
阅读量930 收藏
点赞数
分类专栏： 前端基础 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45427038/article/details/106019614
版权

这个错误呢，很明显，就是找不到设置“onclick”属性的对象，有两个解决思路：

1. 改变JS文件的加载位置

当js代码放在head里面时，如果绑定了类似onclick或者onmouseover事件，很可能出现类似的错误。这是因为浏览器加载HTML文档的顺序是从上往下的，如果遇到JS代码，就会暂停解析，把控制权交给JavaScript引擎，解析完毕后再将控制权交还给浏览器渲染引擎。如果JS代码位于<head>或<body>中部，那么在执行JS命令的时候很可能HTML文档的DOM树还没有加载完全，因此找不到对应的DOM结点，浏览器就会因为找不到对象而报错。

解决办法：

第一，把js文件放在底部加载；

第二，使用window.οnlοad=function(){ }包裹js内容。

2. 检查对象本身是否存在

JS中，我们常常利用getElementById来获得对象的引用。在这里，千万要注意，拼写错误……

毕竟，你的id写错了，程序当然找不到对象，对于Null来说，当然也不会有各种属性了……

如果你找不到错误，可以搜索一下这个参数，看看是否定义了这个对象，可能会有惊喜哦~

我的错误竟然是第二种……我一定是个傻子……

M＆Q
关注
专栏目录
定时关闭广告2020/11/24
weixin_50286102的博客
11-24 523
setTimeout(function() { ad.style.display = ‘none’ }, 2000) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=
对于Uncaught TypeError: Cannot set property ‘innerHTML‘ of null 的理解
Dr_free的博客 专注物联网的数据处理和组网技术
09-09 1901
在w3school自学JavaScript时，发现一个很有意思的问题。首先看下面代码： <!DOCTYPE html> <html> <body> <h2>Body中的JavaScript</h2> <script> myFunction(); function myFunction() { document.getElementById("demo").innerHTML ="hello"; } </script
Cannot set property ‘onclick‘ of null
bjiaguo的博客
09-02 372
错误代码如下 <script> var btn = document.getElementById('btn'); btn.onclick=function(){ document.getElementById('p').innerHTML = Date(); } </script> <body> <button id="btn">按钮</button> <p id="p"
JS事件报错之Cannot set property 'onclick' of null
dinggu6579的博客
08-13 216
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> //根据id属性的值从文档中获取这个元素 ...
触发JS事件报错“Cannot set property 'onclick' of null”
Lantz
03-07 441
JS事件报错之“Cannot set property ‘onclick’ of null” <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件</title> <script> var btn1 = docum...
JS解决“Cannot set property ‘onclick‘ of null”的问题
一天不学习，就浑身难受
07-14 3282
原始代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>函数</title> <!-- <link rel="icon" >--> </head> <body> <script> <!-- 第一种方式--> function hello1
解析UncaughtTypeError: Cannot set property 'onclick' of null
05-18
这个错误通常是因为 JavaScript 代码中尝试将 onclick 事件绑定到一个不存在的 HTML 元素上。这种情况通常发生在以下几种情况下： 1. 在 JavaScript 代码中引用了一个不存在的 HTML 元素的 ID。 2. 尝试在文档加载...
关于js：Uncaught TypeError Cannot read properties of undefined (reading ‘style‘) 全局与局部变量 for循环
bsefef的博客
03-09 6003
问题： 想实现点击一个li，就会展示对应的div： 代码为： var tab_list = document.querySelector('.tab_list'); var lis = tab_list.querySelectorAll('li'); var items = document.querySelectorAll('.item'); for(var i = 0; i < lis.length; i++){ // 设置每个li的index值
UEditor使用及Cannot set property 'innerHTML' of undefined 及Cannot read property 'replace' of undefine
keilson的博客
06-16 1万+
UEditor使用报错Cannot set property 'innerHTML' of undefined 及Cannot read property 'replace' of undefine   ueditor源码链接 http://download.csdn.net/download/u014793282/9872235   js引入顺序 &lt;script type="t...
Cannot set properties of null
最新发布
09-02
"Cannot set properties of null"错误是在JavaScript中经常遇到的错误之一。它表示在尝试设置一个null或undefined值的属性时发生了错误。 该错误通常发生在以下情况下： 1. 当使用getElementById方法时，指定的元素...
浏览器出现Cannot set property ‘onclick‘ of null的问题
fly_ship的博客
05-05 317
当js文件放在head里面时，如果绑定了onclick事件，就会出现这样的错误，是因为W3School的写法是浏览器先加载完按钮节点才执行的js，所以当浏览器自顶向下解析时，找不到onclick绑定的按钮节点，于是报错。 因此，需要把js文件放在底部加载，就会避免该问题。 在JS外包一个window.οnlοad=function(){}也可以解决 ...
页面运行出现Cannot set property ‘onclick‘ of null问题
Aaron Con的博客
05-27 227
由于浏览器解析代码是自上而下的，可能是由于js在html的头部引入的，所以在解析中先解析js中的代码，导致onclick的属性为null 解决方法： 1.将js的引入放在html后面
JS事件报错Cannot set property ‘onclick‘ of null，原因及解决方法
Zebra的博客
04-04 2007
目录 报错信息： 那么为什么会报错呢？ 解决方法： 报错信息： 在使用js的时候报以下错误 下面是对应的文件 my.js文件： document.getElementById("button").onclick=function () { document.getElementById("head").innerHTML = "Teleporter"; }; html代码（引入了上面的js文件） <!DOCTYPE html> <html lang=
浏览器出现Cannot set property 'onclick' of null的问题
aolian8881的博客
12-07 213
Part1: 当js文件放在head里面时，如果绑定了onclick事件，就会出现这样的错误， 是因为W3School的写法是浏览器先加载完按钮节点才执行的js，所以当浏览器自顶向下解析时，找不到onclick绑定的按钮节点，于是报错。 【1】因此，需要把js文件放在底部加载，就会避免该问题。 【2】在js代码外包一个window.onload = function(){} 即可...
学习笔记3--Cannot set property 'onclick' of null的问题
Be_what_you_w点滴ant
10-05 1877
前端基础笔记3--Cannot set property 'onclick' of null的问题
Cannot set property 'onclick' of null的问题
qq_38406852的博客
12-23 1929
如果js代码不多的话，我习惯写于html页面的&lt;head&gt;标签里 今天写到一个点击事件，测试点击事件的时候浏览器报错，提示 Cannot set property 'onclick' of null。 最后了解到是因为先读取了js文件，没有获取到onclick事件。 解决方法： 将js代码 移动到需要点击的按钮后 或者 让浏览器先加载完按钮节点再执行JS 即 在j...
解决Uncaught TypeError: Cannot set property 'onclick' of null错误的方法
热门推荐
wls.ink
04-13 5万+
问题分析：当JS文件放在head标签里中时，并且绑定了onclick事件，就出现了这个错误 原因： W3School中介绍浏览器先加载完按钮节点才执行JS，当浏览器自顶向下解析时，找不到onclick绑定的按钮节点了 如下面这个例子： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-...
15 Uncaught TypeError: Cannot set properties of null (setting ‘onclick‘)
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
06-07 9102
2：报错的原因 文档的加载过程是自上向下加载。使用未命名的变量、会报错1、将Javascript代码从标签中放入中 2、如果非要将该段代码放入到head标签中该怎样做？？？ 修改后的代码
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值