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

news2025/1/31 8:15:41

场景

控制台报错"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) 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/407633.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

css鼠标变成小手(css中鼠标悬停是为小手)

CSS控制鼠标样式变换如何写代码呢&#xff1f; 代码&#xff1a;&#xff1a;p stylecursor: crosshair演示&#xff1a;定位指示/p如果需要将鼠标变换成帮助状态的时候。代码&#xff1a;p stylecursor: help演示&#xff1a;帮助/p当然这些只是一些常见的比较实用的代码。我们…

前端实现可拖拽流程的js框架

1 AntV X6 是 AntV 旗下的图编辑引擎&#xff0c;提供了一系列开箱即用的交互组件和简单易用的节点定制能力&#xff0c;方便我们快速搭建 DAG 图、ER 图、流程图等应用。 XFlow是基于 X6 图编辑引擎、面向 React 技术栈用户的专业图编辑应用级解决方案, 帮助您轻松开发复杂的…

前端使用print.js实现打印

前言 项目中经常会用到前端调用浏览器打印的功能&#xff0c;也经常会遇到一些问题&#xff0c;写这篇文章是为了更好的梳理一下相关内容。下面的内容基于vue。 如果需要用到前端生成二维码可以看我的这篇文章&#xff1a;在vue项目中使用qrcodesjs2生成二维码 注&#xff1a…

【学姐面试宝典】—— 前端基础篇Ⅰ(HTTP/HTML/浏览器)

前言 博主主页&#x1f449;&#x1f3fb;蜡笔雏田学代码 专栏链接&#x1f449;&#x1f3fb;【前端面试专栏】 今天开始学习前端面试题相关的知识&#xff01; 感兴趣的小伙伴一起来看看吧~&#x1f91e; 文章目录http 和 https 的基本概念http 和 https 的区别https 协议的工…

【React Router v6】这17个API,你真的都懂了吗?(建议收藏)

😇本文目录😇 Component1.` <BrowserRouter> `2.`<HashRouter>`3.`<Routes />与<Route />`4.`<Link>`5.`<NavLink>`6.`<Navigate />`7.`<Outlet>`Hooks1.`useRoutes()`2.`useNavigate()`3.`useParams()`

【微信小程序】电商移动前端API文档

文章目录一、文档更新说明1、返回值调整2、分类页图片3、订单支付接口二、路径说明三、电商登录实现方式四、API详情1、全局权限访问&#xff08;1&#xff09;主页API获取首页轮播图数据获取首页分类选项数据获取首页楼层数据&#xff08;2&#xff09;商品API商品列表搜索搜索…

pinia详细使用步骤(0基础)

Pinia简介 学vue2的都知道vuex状态管理&#xff0c;所谓状态管理&#xff0c;简单来说就是一个存储数据的地方&#xff0c;存放在Vuex中的数据在各个组件中都能访问到&#xff0c;它是Vue生态中重要的组成部分。 而pinia同理也是起到状态管理的作用&#xff0c;但是它又不完全…

TDesign小程序组件库体验

原来小程序开发有组件库选择的问题&#xff0c;可以使用WeUI或者Vant。今年腾讯开源了前端的框架TDesign&#xff0c;我也分享了两篇使用文章。 年初分享的主要是PC端的框架&#xff0c;除了有PC端的框架外&#xff0c;最近TDesign又新出了小程序的框架&#xff0c;组件比较丰…

前端vue视频vue-video-player插件总结知识点案例(带源码)

目录文档安装main.js文件全局引入视频格式组件方法切换视频清晰度基础案例效果如下完整案例1效果如下完整案例2效果如下最后文档 文档地址 选项参考 API文档 配置函数方法等 Git地址 Git地址 安装 1.vue-video-player 插件下载 npm install vue-video-player --save2.推…

vue3-admin商品管理后台项目(登录页开发和功能实现)

今天来实现vue3-admin商品管理后台项目的登录页功能 首先在pages文件夹下面添加一个login.vue文件&#xff0c;里面先写入简单的template <template><div>登录</div> </template>然后在router文件夹下面的Index.js里面编辑&#xff0c;仍然是引入页面…

【前端开发工具】VUE3 devtools安装

背景 尤雨溪在2020年9月19日晚正式发布vue3.0 one piece。此版本相较于vue2版本&#xff0c;更快、更小、更易维护、更易于原生、让开发者更轻松&#xff1b;所以学习vue3&#xff0c;对于一个前端开发者来说是一个刻不容缓的学习趋势。 学习vue3自然也离不开debug啦~~ Vue官方…

JS——正则表达式(超详细)

正则表达式概念创建正则表达式正则表达式常用方法test(字符串)search(正则表达式&#xff09;正则表达式.exec(字符串&#xff09;字符串.match(正则表达式)字符串.replace(正则表达式&#xff0c;新的内容&#xff09;断言范围类字符类字符类取反修饰符g&#xff1a;global全文…

Web前端 | HTML嵌入JS代码的三种方式

✅作者简介&#xff1a;一位材料转码农的选手&#xff0c;希望一起努力&#xff0c;一起进步&#xff01; &#x1f4c3;个人主页&#xff1a;每天都要敲代码的个人主页 &#x1f525;系列专栏&#xff1a;Web前端 目录 一&#xff1a;JavaScript概述 二&#xff1a; HTML嵌入…

如何升级Vue的版本 vue2.9.6升级到vue3.0

背景&#xff1a;电脑使用多年&#xff0c;一直使用vue 2.x版本&#xff0c;项目开发过程中由于一个模块涉及的集成模块过多&#xff0c;导致需要进行定义的变量越来越多&#xff0c;代码出现冗余&#xff0c;因此在同事的推动下&#xff0c;鉴于vue 3.x的优化&#xff0c;故对…

HTML学生个人网站作业设计:个人主页博客web网页设计制作 (HTML+CSS) (1)

&#x1f329;️ 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f482; 作者主页: 【进入主页—&#x1f680;获取更多源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;HTML5网页期末作业 (1000套…

React函数式组件传值(父子,兄弟,祖先等)以及父子之间方法的调用。

一.前言 react作为一门前端语言&#xff0c;具有独特灵活性&#xff0c;这也是它的魅力所在。前端组件化&#xff0c;也是将整个前端分成了一个一个组件&#xff0c;本期我们讲解的就是react组件之间的传值&#xff08;包括父子&#xff0c;兄弟&#xff0c;祖先&#xff09;等…

Vue知识点总结

特出以下声明&#xff01;&#xff01;&#xff01;小编只是一个喜欢系统化总结知识的人&#xff0c;我这里的总结&#xff0c;可以理解为vue的知识框架。有一些关于语法之类的&#xff0c;建议大家去官网看&#xff0c;可以直接施展CV大法&#xff0c;哈哈哈。同时有一些知识点…

【Vue全局事件总线详解】

Vue全局事件总线详解Vue全局事件总线详解简介原理一、满足所有组件都能访问得到全局事件总线二、可以调用 $on ,和 $off 和 $emit实现全局事件总线完整实例代码总结Vue全局事件总线详解 简介 全局事件总线是一种组件间通信的方式&#xff0c;适用于任意组件间通信 全局事件…

1.启动前端项目(命令行)

1、从github或其他地方获得的前端项目&#xff0c;想要看效果 1.用管理员身份运行命令提示符&#xff08;windows的控制后台&#xff09; 2.进入前端项目安装的文件夹&#xff08;这是我的文件夹&#xff09; 3.在命令行中输入&#xff1a;npm install 4.在命令行中输入&am…

Vben Admin框架 table的使用以及相关的内容

Vben Admin框架 table的使用以及相关的内容 一、table的使用基础示例&#xff1a; Vben Admin官网链接: 官网组件页链接 这是我使用此框架的用法&#xff0c;仅供参考&#xff0c;我是vue3项目中使用此框架&#xff0c;写法是vue3的写法 第一步 引入BasicTable 组件。 // r…