浏览器出现Cannot set property ‘onclick‘ of null的问题

最新推荐文章于 2022-04-04 10:47:09 发布
最新推荐文章于 2022-04-04 10:47:09 发布
阅读量320 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fly_ship/article/details/116431461
版权
当JavaScript文件置于<head>中并尝试绑定onclick事件时，由于浏览器的执行顺序，可能会导致找不到按钮节点的错误。解决方法包括将JS文件移到底部加载或使用window.onload函数包裹代码，确保在DOM加载完成后执行。这两种策略可以有效避免此类问题，保证事件绑定的正确性。
摘要由CSDN通过智能技术生成

当js文件放在head里面时，如果绑定了onclick事件，就会出现这样的错误，是因为W3School的写法是浏览器先加载完按钮节点才执行的js，所以当浏览器自顶向下解析时，找不到onclick绑定的按钮节点，于是报错。

因此，需要把js文件放在底部加载，就会避免该问题。

在JS外包一个window.οnlοad=function(){}也可以解决

fly_ship
关注
专栏目录
正确解决vue:Cannot set property ‘xxx’ of undefined异常的有效解决方法
wbajsjhhhhh的博客
05-03 3614
正确解决vue:Cannot set property ‘xxx’ of undefined异常的有效解决方法
对于Uncaught TypeError: Cannot set property ‘innerHTML‘ of null 的理解
Dr_free的博客 专注物联网的数据处理和组网技术
09-09 1919
在w3school自学JavaScript时，发现一个很有意思的问题。首先看下面代码： <!DOCTYPE html> <html> <body> <h2>Body中的JavaScript</h2> <script> myFunction(); function myFunction() { document.getElementById("demo").innerHTML ="hello"; } </script
【报错】(Javascript):Cannot set property 'onclick' of null
M&Q的博客
05-11 946
这个错误呢，很明显，就是找不到设置“onclick”属性的对象，有两个解决思路： 1. 改变JS文件的加载位置 原因：当js文件放在head里面时，如果绑定了onclick或者onmouseover事件，就会出现如上图类似的错误，是因为浏览器的加载你写的html文档的顺序是从上往下，加载完按钮节点才执行的js，所以当浏览器自顶向下解析时，找不到onclick绑定的按钮节点，于是报错。 解决办法：第一，把js文件放在底部加载；第二，使用window.onload=function(){}包裹js内容。
Cannot set property ‘onclick‘ of null
bjiaguo的博客
09-02 376
错误代码如下 <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”的问题
一天不学习，就浑身难受
07-14 3308
原始代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>函数</title> <!-- <link rel="icon" >--> </head> <body> <script> <!-- 第一种方式--> function hello1
JS事件报错之Cannot set property 'onclick' of null
dinggu6579的博客
08-13 217
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> //根据id属性的值从文档中获取这个元素 ...
解析UncaughtTypeError: Cannot set property 'onclick' of null
最新发布
05-18
这个错误通常是因为 JavaScript 代码中尝试将 onclick 事件绑定到一个不存在的 HTML 元素上。...如果你仍然无法解决这个问题，你可以在代码中使用 console.log() 函数输出变量的值，从而找出代码中的错误。
Uncaught TypeError: Cannot set properties of null (setting 'onclick')
03-31
In this case, you are trying to set the onclick property of an element that is null. To fix this error, you need to make sure that the element exists before setting its properties. You can do this ...
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...
触发JS事件报错“Cannot set property 'onclick' of null”
Lantz
03-07 450
JS事件报错之“Cannot set property ‘onclick’ of null” <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件</title> <script> var btn1 = docum...
浏览器出现Cannot set property 'onclick' of null的问题
aolian8881的博客
12-07 216
Part1: 当js文件放在head里面时，如果绑定了onclick事件，就会出现这样的错误， 是因为W3School的写法是浏览器先加载完按钮节点才执行的js，所以当浏览器自顶向下解析时，找不到onclick绑定的按钮节点，于是报错。 【1】因此，需要把js文件放在底部加载，就会避免该问题。 【2】在js代码外包一个window.onload = function(){} 即可...
页面运行出现Cannot set property ‘onclick‘ of null问题
Aaron Con的博客
05-27 232
由于浏览器解析代码是自上而下的，可能是由于js在html的头部引入的，所以在解析中先解析js中的代码，导致onclick的属性为null 解决方法： 1.将js的引入放在html后面
学习笔记3--Cannot set property 'onclick' of null的问题
Be_what_you_w点滴ant
10-05 1884
前端基础笔记3--Cannot set property 'onclick' of null的问题
Cannot set property 'onclick' of null的问题
qq_38406852的博客
12-23 1936
如果js代码不多的话，我习惯写于html页面的&lt;head&gt;标签里 今天写到一个点击事件，测试点击事件的时候浏览器报错，提示 Cannot set property 'onclick' of null。 最后了解到是因为先读取了js文件，没有获取到onclick事件。 解决方法： 将js代码 移动到需要点击的按钮后 或者 让浏览器先加载完按钮节点再执行JS 即 在j...
JS事件报错Cannot set property ‘onclick‘ of null，原因及解决方法
Zebra的博客
04-04 2017
目录 报错信息： 那么为什么会报错呢？ 解决方法： 报错信息： 在使用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 报错
lan的博客
09-09 223
检查发现js代码如下： <script> function deleteUser(id) { if (confirm("你确定要删除吗")){ location="${pageContext.request.contextPath}/delUserServlet?id="+id; } } window.onload=function () { //给删除选中按钮添加单击事件delSelect
Uncaught TypeError: Cannot set property ‘onclick‘ of null
紫月i的博客
10-19 514
在使用vue时报错Uncaught TypeError: Cannot set property ‘onclick’ of null，原因是因为vue项目是有加载顺序的，当页面还没加载完成时js代码就已经执行了，因为获取不到而报错，只需要把代码写在onload函数当中就行 window.onload = function(){ var btn = document.querySelector('#btn'); btn.onclick = function(){ console.lo.
报错之-Cannot set property 'onclick' of null
weixin_30257433的博客
09-02 114
当js文件放在head里面时，如果绑定了onclick或者onmouseover事件，就会出现如下图类似的错误，是因为浏览器的加载你写的html文档的顺序是从上往下，加载完按钮节点才执行的js，所以当浏览器自顶向下解析时，找不到onclick绑定的按钮节点，于是报错。解决办法有：第一，把js文件放在底部加载；第二，使用window.onload=function(){}包裹js内容。 转载于:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值