网页html错误：Uncaught TypeError: Cannot read property 'addEventListener' of null

最新推荐文章于 2021-07-15 16:46:13 发布
最新推荐文章于 2021-07-15 16:46:13 发布
阅读量1.9w 收藏 2
点赞数 4
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Smtime826/article/details/83448095
版权
HTML 同时被 2 个专栏收录
11 篇文章 0 订阅
订阅专栏
js
1 篇文章 0 订阅
订阅专栏 
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
    document.getElementById("myBtn").addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World";
   });
</script>

</head>
<body>

    <p>该实例使用 addEventListener() 方法来向按钮添加点击事件。</p>
    <button id="myBtn">点我</button>
    <p id="demo"></p>

</body>
</html>

 

标签元素还没有创建就调用引用标签的脚本就会出现此问题,将脚本放置在脚本标签的后面就可以了

<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>

<body>
<p>该实例使用 addEventListener() 方法来向按钮添加点击事件。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>

<script>
    document.getElementById("myBtn").addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World";
    });
</script>

</body>
</html>

 

时光Timely
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Cannot read properties of null (reading ‘addEventListener‘) 解决方法
cozy666的博客
01-19 1181
中还没有渲染完成（JS 中操作DOM元素的函数方法需要在 HTML 文档渲染完成后才可以使用）还有人说将script引用的js放在body的最底下，这个对我没有作用，但你们可以尝试一下。1.在mounted中使用window.onload。2.使用$(document).ready()3.使用this.$nextTick。
报错 Cannot read properties of undefined（reading‘addEventListener‘）如何解决
最新发布
2301_79420857的博客
06-22 409
无法读取未定义的属性(读取' addEventListener ')问题：这是我给一个input输入框绑定的监听事件出现的报错。
Uncaught TypeError: Cannot read property ‘addEventListener‘ of null 可能出现的问题
yqx_123的博客
07-15 5252
先来说一下事情的经过：今天心血来潮，打开b站想跟着某个视频简单的敲个小demo，结果刚写完第一个页面的js就开始报错Cannot read property 'addEventListener' of null。代码如下 entry.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible
报错：Uncaught TypeError:Cannot read property ‘addEventListener‘ of null
yanbabyo的博客
05-06 680
报错：Cannot read property ‘addEventListener’ of null 解决办法： 将open的监听事件写进window.οnlοad=function(){ }里面，并且加上判断条件if(open){}。其他的监听事件也是如此。
js事件处理程序 Uncaught TypeError: Cannot read property 'addEventListener' of null
azirong的博客
08-23 7143
在写跨浏览器的事件处理程序时，遇到这个bug：Uncaught TypeError: Cannot read property 'addEventListener' of null<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body><butt
Uncaught TypeError: Cannot read property ‘addEventListener‘ of null
weixin_44841312的博客
05-25 1235
造成该bug的原因：该元素为null，不能直接给它添加监听。你一看代码发现有该元素啊！哈哈 把JS的引用标签放在末尾就没问题，你放在头部是先加载JS代码，再加载HTML里面的内容，所以为NULL
Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#Object‘的解决方法
12-09
当你遇到“Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'”这样的错误，通常是因为在同一个模块中混用了CommonJS（`require`和`module.exports`）和ES6模块（`import`...
Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#&lt;Object&gt;‘的解决
08-30
在Vue开发过程中，有时会遇到一个常见的错误：`Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'`。这个错误通常发生在使用Webpack打包Vue应用时，由于模块导入导出规范的...
ASP.NET MVC运行出现Uncaught TypeError: Cannot set property __MVC_FormValidation of null的解决方法
10-29
同一相站点，有些页面的客户端验证能工作，而有些死活不行。打开页面就出现Uncaught TypeError: Cannot set property __MVC_FormValidation of null错误
小程序报错: Uncaught TypeError: Converting circular structure to JSON
03-29
今天把最近一直在开发的小程序放安卓手机上测试一下，结果某个页面就一直报错： Uncaught TypeError: Converting circular structure to JSON 先说一下基本的环境： 系统：Android 6.0.1 手机：小米4 微信版本：...
Vue打包Cannot read property 'tapPromise' of undefined报错处理.docx
01-21
Vue打包Cannot read property 'tapPromise' of undefined报错处理 Vue.js是一款流行的前端框架，用于构建用户界面和单页应用程序。然而，在使用Vue.js时，我们可能会遇到一些报错信息，例如Cannot read property '...
ionic3+angular4中给DOM添加监听事件后报错：Uncaught (in promise): TypeError: Cannot read property 'addEventListen
涂涂
07-26 1万+
Uncaught (in promise): TypeError: Cannot read property 'addEventListener' of null TypeError: Cannot read property 'addEventListener' of null at new MessagePage 原因：在页面还没有加载完成后这段监听的js代码已经执行，所以在执行这段代码的时
Uncaught TypeError: Cannot read property 'addEventListener' of null
weixin_30449239的博客
11-25 992
<script type="text/javascript"> var body1=document.getElementById('#body') </script> 　 错误提示：Uncaught TypeError: Cannot read property 'addEventListen...
微信小程序开发之报错TypeError: Cannot read property ‘addEventListener‘ of undefined&&调试基础库修改步骤
sf9090的博客
05-19 2万+
TypeError: Cannot read property ‘addEventListener’ of undefined VM697:1 TypeError: Cannot read property ‘invoke’ of undefined VM697:1 Unhandled promise rejection TypeError: WebAssembly.instantiate(): Argument 0 must be a buffer source or a WebAssembly.Modu
错误：Cannot read property ‘addEventListener‘ of null
xiaoyuer_2020的博客
08-27 7007
调试代码遇到问题：Cannot read property ‘addEventListener’ of null 原因：在页面还没有加载完成这段监听的js代码已经执行，执行这段代码的时候找不到监听的元素，因为监听的DOM节点还没有加载创建。 原生js的解决办法 1.将脚本放在页面的底部。 2.使用jQuery库。 3.把js代码写在Window.unload=function(){}代码框内。 其他 等待页面完全加载完了再加载这段Js。 ...
Uncaught TypeError: Cannot read property ‘addEventListener‘ of undefined原因
ferrysoul的博客
11-05 1万+
I think the easiest approach would be to just check that el is not null before adding an event listener: var el = document.getElementById('overlayBtn'); if(el){ el.addEventListener('click', swap...
Cannot read property 'addEventListener' of null
热门推荐
lzrit的博客
08-11 7万+
今天打开页面的时候遇到个问题，Cannot read property 'addEventListener' of null 原因：在页面还没有加载完成后这段监听的js代码已经执行，所以在执行这段代码的时候监听的DOM节点还没有加载创建，所以根本就找不到监听的元素。所以返回null。 解决方法： 1.等待页面完全加载完了再加载这段Js即可； 2.在原生js中的解决方法：      1.将...
Uncaught TypeError: Cannot read property 'addEventListener'
小虫
03-24 1万+
"Uncaught TypeError: Cannot read property 'addEventListener' of null" 标签元素还没有创建就调用引用标签的脚本就会出现此问题 将脚本放置在脚本标签的后面就可以了
js: Uncaught TypeError: Cannot read property 'connect' of null
06-07
这个错误通常出现在尝试访问一个 null 或 undefined 对象的属性或方法时。在这种情况下，你正在尝试使用一个 null 对象的 connect 方法，导致 JavaScript 抛出了 TypeError 异常。 要解决这个问题，你需要检查你的代码中是否有可能导致 connect 方法返回 null。你可以使用条件语句或者断言来确保对象不会为 null 或 undefined。如果你确定对象不应该为 null，那么你需要检查代码中是否有其他地方导致了这个对象为 null 的情况。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值