报错“Cannot read properties of null (reading ‘addEventListener‘)“

最新推荐文章于 2024-05-31 17:40:50 发布
最新推荐文章于 2024-05-31 17:40:50 发布
阅读量1.4w 收藏 6
点赞数 5
文章标签： java servlet 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42101569/article/details/126431123
版权

场景

控制台报错"Cannot read properties of null (reading 'addEventListener')"

错误原因

因为 JavaScript 中操作DOM元素的函数方法需要在 HTML 文档渲染完成后才可以使用，如果没有渲染完成，此时的 DOM 树是不完整的，这样在调用一些 JavaScript 代码时就可能报出 "undefined" 错误。

解决方法

把代码放到window.οnlοad=function(){...}里面。

window.onload

window.onload() 用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。window.onload() 通常用于 <body> 元素，在页面完全载入后(包括图片、css文件等等)执行脚本代码。

window.onload与$(document).ready()的区别

参考内容：JavaScript window.onload | 菜鸟教程 (runoob.com) 

zhangty0808
关注
  • 5
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Js on及addEventListener原理用法区别解析
10-15
JavaScript中的事件处理方式有两种主要的形式：`on`属性和`addEventListener`方法。这两种方式在处理事件时有着不同的特性和用法，理解它们的区别和应用场景对于编写高效、可维护的JavaScript代码至关重要。 首先，...
javascript attachEvent和addEventListener使用方法
10-30
attachEvent与addEventListener区别适应的浏览器版本不同，同时在使用的过程中要注意
解决Uncaught TypeError: Cannot read properties of null错误
最新发布
weixin_48683052的博客
05-31 2531
当在编写JavaScript代码时，经常会遇到Uncaught TypeError: Cannot read properties of null错误。本文将介绍这个错误的原因、常见的解决方法以及如何避免它的发生。
解决异步传参时出现 “TypeError: Cannot read properties of undefined (reading‘xxx‘)“这一错误
AiHongHong_的博客
02-16 1万+
解决异步传参时出现 “TypeError: Cannot read properties of undefined (reading‘xxx‘)“这一错误
解决 Cannot read properties of undefined类型的报错
weixin_43706224的博客
03-13 2万+
报错类型一般为两种对象类型对象没有数据的时候为undefined 这个时候访问内部内容就会报错举个例子正常情况 对象有值的时候var obj={name:‘张三’,age:18}#此时对象有数据访问不会报错123对象没值的时候var obj={}#就会报错 Uncaught SyntaxError: Unexpected token ‘.’#表示空对象{}不能使用.1234对象为undefined的时候。
关于 Cannot read property 'length' of null 报错的解决办法
李光 未来科技
06-16 8万+
最近在搞前端的时候突然报了Cannot read property ‘length’ of null的错,一开始都是在前端调试错,发现解决不了问题,后来发现如果你所查找的数据条数为0的时候,后端返回给前端是null,此时必然报错Cannot read property ‘length’ of null. 解决办法: 如果后端的返回值为null,就需要我们在后端返回一个空的list数组 本人错误的后...
Cannot read properties of null bug解决方法
XIAO_A_fighting的博客
09-14 711
定位到el-dialog组件，最初认为是dialog中table依赖的接口数据返回有问题，后发现不是，于是定位到组件本身。看到网上有说是因为dialog销毁失败的 要添加v-if 或者 destory-on-close设置为true，但是对于我们的项目都没用…后来发现 是因为触发dialog的 span标签，用了style设置样式，把行间样式改成了scss样式就修复了 有点玄学。本地运行没有任何错误，在生产环境中，当点击按钮，展示el-dialog时第一次正常，关闭时报错。
addEventListener 的用法示例介绍
09-04
`addEventListener` 是JavaScript中用于添加事件监听器的方法，它允许我们为同一个元素绑定多个事件处理函数，这对于构建复杂的交互式网页非常有用。在不同的浏览器环境中，`addEventListener` 的使用略有差异，尤其...
document.addEventListener使用介绍
09-04
`document.addEventListener` 是JavaScript中的一个核心方法，用于向指定元素添加事件监听器。这个方法是DOM（Document Object Model）事件处理的一部分，它允许我们在网页的文档对象上绑定各种类型的事件，如点击、...
动态的绑定事件addEventListener方法的使用
09-04
在本文中，我们将深入探讨`addEventListener`方法的使用，这对于创建响应式的Web应用至关重要。 `addEventListener`是DOM（文档对象模型）级别2事件处理程序的一部分，它允许我们为一个元素添加一个或多个事件...
js报错信息Uncaught TypeError: Cannot read properties of null (reading ‘appendChild‘)
weixin_44344709的博客
09-02 1029
最后一行leftTop.appendChild(bigPic)报错，首先打印了一下bigPic，没问题，然后在获取leftTop元素之后打印了一下leftTop，结果是null，所以是leftTop没有获取成功，对元素进行检查，原来是标签名写错了，应该是lefttop，我写成了leftTop，修改之后运行成功。以后遇到类名标签名这些，还是去复制粘贴比较安全啊。海燕啊，你可长点心吧！
错误解决：Uncaught TypeError: Cannot read properties of null (reading ‘XXX‘).
m0_56426418的博客
04-16 1万+
我想既然显示 username 中的值为 null 就说明 session 大概率没有保存用户登录后的信息，既然没有信息那么大概率与控制层有关。当编写完接口中的方法，实现类中进行实现的时候，个人往往喜欢通过快捷方式重写实现接口中的方法，而这时加载出的方法默认会返回 null。报错意思大概就是你需要的这个 “username” 属性的值本来就是空的，所以无法获取到它的值。这里的目的是打开特定页面后，自动将用户登录后 session 中保存的 username 取出并将值赋给<input>标签。
Cannot read properties of null (reading ‘ xxx ‘ )的解决
weixin_48104862的博客
08-11 6万+
根据getElementById 的属性知道，他读到的是html中 标签的id ，此处报错说明我没有这个名为 tno 的Id ,所以根据这里我发现我在所需要的绑定标签中，给他的id = "type "
解决 Cannot read properties of null (reading ‘disabled‘)报错
无理. 的博客
10-14 6446
在Vue + elementUI 后台项目里遇到了一个问题，所有模块的的下拉Select 和时间选择器DataPicker (可能还有其他组件) ，在选择后点击页面其他地方都不会自己收起。打开控制台会发现报错了，每点击一次，错误+1.代码里全局搜索 el-dropdown ，el-dropdown下缺少 el-dropdown-menu 元素，如果元素上有 v-if 改成 v-show。
Cannot read properties of null (reading ‘insertBefore‘)
Annie的博客
04-04 1万+
一、报错现象 vue3 + element plus 项目，本地启动时，页面进行所有操作都正常；部署到生产环境后，数据驱动DOM变化的操作会导致如下报错。 二、可能原因及解决方案 经过分析出现报错的操作步骤及多方资料查询，不同情况下的报错，其原因不同。遇到这种问题的同学可以从以下几方面进行排查。 1、v-if 导致 在 v-if 值为 false 时，如果操作了 v-if 控制的 DOM，可能会因为该 DOM 元素不存在而报错。 解决方案：v-show 替换 v-if 2、...
解决 “TypeError: Cannot read properties of undefined (reading ‘xxx‘)“
热门推荐
qq_57558631的博客
05-17 12万+
这个报错 要用到的数据读不到这个属性 1.检查你的data定义的属性是不是没有你用到的这个属性,没有的话就定义一个，如下： #template <div class="he-info__item"> <span class="he-label">收货人姓名:</span> <span class="he-value">{{ detail.buyer.name }}</span> </div> <div cla....
Error in render: “TypeError: Cannot read properties of null (reading ‘0‘)“ 报错解决方案
Rice_w的博客
04-30 3万+
近期在写项目的时候遇到一个很有趣的问题，当我准备获取一个数组中的子数组到页面时，提示我报错Error in render: “TypeError: Cannot read properties of null (reading ‘0’)”，渲染的时候不能读取，这是怎么回事呢，赶紧搜索一下，发现问题了 这是我原来报错的代码 <view class="apply-name"> <text>{{ item.applicant }}</text>
luckySheet 报错 Cannot read properties of null (reading 'addEventListener')
11-22
根据提供的引用[1]，报错信息"Cannot read properties of null (reading 'addEventListener')"表明在调用addEventListener方法时，该方法的调用者为null，即没有找到对应的DOM元素。因此，需要检查代码中是否正确获取了对应的DOM元素。 以下是可能导致该错误的几种情况及解决方法： 1.在使用querySelector或getElementById等方法获取DOM元素时，未正确指定选择器或ID，导致获取到的元素为null。 解决方法：检查选择器或ID是否正确，是否与HTML代码中的元素匹配。 2.在使用querySelector或getElementById等方法获取DOM元素时，未等待DOM元素加载完成，导致获取到的元素为null。 解决方法：将代码放在DOMContentLoaded事件中执行，或者使用window.onload事件等待页面完全加载后再执行。 3.在使用addEventListener方法时，未正确指定事件类型或事件处理程序，导致无法正确绑定事件。 解决方法：检查事件类型和事件处理程序是否正确，是否存在语法错误。 以下是一个可能的解决方案： ```javascript // 等待DOM元素加载完成后再执行 document.addEventListener('DOMContentLoaded', function() { const AAA = document.querySelector('.aaa'); if (AAA) { AAA.addEventListener('click', function() { this.style.backgroundColor = 'red'; console.log(AAA === this); // 点击后返回true }); } }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值