(原创)JS点击事件——Uncaught TypeError: Cannot set property 'onclick' of null

最新推荐文章于 2022-04-04 10:47:09 发布
最新推荐文章于 2022-04-04 10:47:09 发布
阅读量1.9k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/kakamonster/article/details/80197390
本文介绍了一种常见的JavaScript编程问题——点击图片时无法正确切换显示的问题，并提供了两种有效的解决方案：一是将JS代码放置于</body>标签前；二是使用window.onload事件确保DOM完全加载后再执行JS代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

html部分代码：

 

JS部分代码：

需要实现的效果：点击图片，来回相互切换。

我开始的错误做法：代码如上图所示（逻辑上看起来是没有错误的）

尝试过程：把JS代码放在</body>闭合标签之前运行是没有问题的，单独写在JS代码文件中，从head标签内引入JS文本，报错Uncaught TypeError: Cannot set property 'onclick' of null

最终解决方案：将JS代码放入window.load = function(){.........}中，head标签内引入JS文本，便可以正确运行。O(∩_∩)O

第二种方法：如上文尝试过程中提到的，将JS代码写在</body>标签之前

总结：如果把js直接写在head标签之内或者写成单独JS文件从head标签引入，浏览器则先执行JS代码，后加载页面，因此报错Uncaught TypeError: Cannot set property 'onclick' of null.将JS代码写在</body>标签之前或者写在window.onload = function(){....}中引入html页面，则先加载页面，后执行JS代码，代码则会正常运行。


kakamaster1
关注
Uncaught TypeError: Cannot set property ‘onclick‘ of null
紫月i的博客
10-19 565
在使用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的问题
webGIS成长记录
08-27 678
当js文件放在head里面时，如果绑定了onclick事件，就会出现这样的错误，是因为W3School的写法是浏览器先加载完按钮节点才执行的js，所以当浏览器自顶向下解析时，找不到onclick绑定的按钮节点，于是报错。因此，需要把js文件放在底部加载，就会避免该问题。 或者可以在js外包window.onload=function(){}
JS事件报错Cannot set property ‘onclick‘ of null，原因及解决方法
Zebra的博客
04-04 2099
目录 报错信息： 那么为什么会报错呢？ 解决方法： 报错信息： 在使用js的时候报以下错误 下面是对应的文件 my.js文件： document.getElementById("button").onclick=function () { document.getElementById("head").innerHTML = "Teleporter"; }; html代码（引入了上面的js文件） <!DOCTYPE html> <html lang=
JS点击事件——Uncaught TypeError: Cannot set property 'onclick' of null
热门推荐
u013287846的博客
08-14 2万+
html代码： 点击我 JS代码： var button = document.getElementById("button"), image = document.getElementById("image"); button.onclick = function () { image.style.di
Uncaught TypeError: Cannot set property 'onclick' of null
qq_41343668的博客
03-09 263
今天在学习js的过程中想要用最基本的js代码实现背景颜色的改变，但发现有报错 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> ...
js点击事件的时候浏览器报错，提示Uncaught TypeError: Cannot set property 'onclick' of null
qq_32539403的博客
09-17 467
1、把js代码放在head或者事件之前会报错 当把js代码放在head里面的话，点击按钮，报错js.html:8 Uncaught TypeError: Cannot set property ‘onclick’ of null* 2、解决办法 把 js代码放在window.οnlοad=function(){…………..}; 里面即可解决，window.onload表示页面加载完成后执行...
Cannot set property ‘onclick‘ of null
bjiaguo的博客
09-02 409
错误代码如下 <script> var btn = document.getElementById('btn'); btn.onclick=function(){ document.getElementById('p').innerHTML = Date(); } </script> <body> <button id="btn">按钮</button> <p id="p"
报错之-Cannot set property 'onclick' of null
weixin_30257433的博客
09-02 147
当js文件放在head里面时，如果绑定了onclick或者onmouseover事件，就会出现如下图类似的错误，是因为浏览器的加载你写的html文档的顺序是从上往下，加载完按钮节点才执行的js，所以当浏览器自顶向下解析时，找不到onclick绑定的按钮节点，于是报错。解决办法有：第一，把js文件放在底部加载；第二，使用window.onload=function(){}包裹js内容。 转载于:...
js报错Cannot set property 'onclick' of null
qq_44701181的博客
11-26 264
把代码添加到：windowd.οnlοad=function{}
【报错】(Javascript):Cannot set property 'onclick' of null
M&Q的博客
05-11 1049
这个错误呢，很明显，就是找不到设置“onclick”属性的对象，有两个解决思路： 1. 改变JS文件的加载位置 原因：当js文件放在head里面时，如果绑定了onclick或者onmouseover事件，就会出现如上图类似的错误，是因为浏览器的加载你写的html文档的顺序是从上往下，加载完按钮节点才执行的js，所以当浏览器自顶向下解析时，找不到onclick绑定的按钮节点，于是报错。 解决办法：第一，把js文件放在底部加载；第二，使用window.onload=function(){}包裹js内容。
Cannot set property 'onclick' of null的问题
qq_38406852的博客
12-23 1970
如果js代码不多的话，我习惯写于html页面的&lt;head&gt;标签里 今天写到一个点击事件，测试点击事件的时候浏览器报错，提示 Cannot set property 'onclick' of null。 最后了解到是因为先读取了js文件，没有获取到onclick事件。 解决方法： 将js代码 移动到需要点击的按钮后 或者 让浏览器先加载完按钮节点再执行JS 即 在j...
学习笔记3--Cannot set property 'onclick' of null的问题
Be_what_you_w点滴ant
10-05 1916
前端基础笔记3--Cannot set property 'onclick' of null的问题
JS事件报错之Cannot set property 'onclick' of null
dinggu6579的博客
08-13 258
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> //根据id属性的值从文档中获取这个元素 ...
触发JS事件报错“Cannot set property 'onclick' of null”
Lantz
03-07 481
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 3526
原始代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>函数</title> <!-- <link rel="icon" >--> </head> <body> <script> <!-- 第一种方式--> function hello1
uniapp [渲染层错误] Uncaught TypeError: Cannot set property 'isWebGL2' of null
最新发布
02-15
### 解决 UniApp 渲染层 `Uncaught TypeError: Cannot set property 'isWebGL2' of null` 错误 当遇到此类错误时，通常是因为尝试访问或修改一个尚未初始化或不存在的对象属性。具体到此案例中，可能是由于 WebGL 上下文未能成功创建而导致相关对象为空。 #### 可能的原因及解决方案： - **确保 DOM 元素已加载** 如果脚本在 DOM 完全加载之前运行，则可能会导致找不到目标元素的情况发生。可以通过监听文档加载事件来延迟执行代码直到整个页面完全加载完毕[^1]。 ```javascript document.addEventListener('DOMContentLoaded', function() { // 初始化逻辑放在这里 }); ``` - **验证上下文获取是否成功** 在调用任何与 WebGL 相关的方法前，应该先确认已经正确获得了 Web GL 绘图上下文。如果返回值为 `null` 或者其他异常情况，应当提供相应的处理机制而不是直接继续后续操作[^4]。 ```javascript const canvas = document.getElementById('myCanvas'); let gl; try { gl = canvas.getContext('webgl2') || canvas.getContext('experimental-webgl'); if (!gl) throw new Error('Unable to initialize WebGL.'); // 设置 isWebGL2 属性 Object.defineProperty(gl, "isWebGL2", { value: !!canvas.getContext('webgl2') }); } catch (e) { console.error(e.message); // 处理失败情形... } ``` - **检查环境兼容性和配置项** 需要核实当前使用的浏览器版本以及设备硬件是否支持所需的 WebGL 功能。对于某些老旧平台可能并不具备完整的图形加速能力，因此建议测试不同环境下应用的表现并适当调整实现方式以提高兼容性[^3]。 - **调试工具辅助排查问题** 利用开发者控制台查看详细的堆栈跟踪信息可以帮助定位确切的发生位置；同时也可以借助性能面板监控资源消耗状况从而发现潜在瓶颈所在之处。通过这些手段往往能够更快速有效地找到引发错误的根本原因[^2]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值