位置: IT常识 - 正文

Uncaught TypeError TypeError: Cannot set properties of null (setting ‘onclick‘)的解决办法

编辑:rootadmin
Uncaught TypeError TypeError: Cannot set properties of null (setting ‘onclick‘)的解决办法

推荐整理分享Uncaught TypeError TypeError: Cannot set properties of null (setting ‘onclick‘)的解决办法,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

我下面用代码示例一下。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>javascript之鼠标事件之按钮控制改变div盒子的背景颜色</title><style>div{width: 200px;height: 200px;border: 1px red solid;background-color: red;}</style><script>var b=document.getElementById("an");b.onclick=function(){b.style.background="#ffefa1";};</script></head><body><div id="an">可以试一下</div></body></html>报错原因

这个代码你读一下,好像可以实现我们想要的效果,实现点击相关的div盒子实现其背景颜色变颜色的效果,但是一运行下来,在调试控制台里就会出现Uncaught TypeError TypeError: Cannot set properties of null (setting 'onclick')这样的报错------未捕获的类型错误: 无法设置属性

意思就是,无法获取到dom节点,从而导致无法对dom节点进行相关的操作,即无法设置相关dom节点的属性。

那又为什么不能获取dom节点呢?我不是写了 这个获取相关标签dom节点的js代码吗?

var b=document.getElementById("an");

这就跟我们怎么在 HTML 中引入 JavaScript有关了,

那么我们怎么在 HTML 中引入 JavaScript 呢?🤔

Uncaught TypeError TypeError: Cannot set properties of null (setting ‘onclick‘)的解决办法

引入方式与 CSS 相似,有以下三种方式:

在 HTML 标签中直接引入,针对一些特别简短的 JavaScript 代码。

使用 script 标签可以将 JavaScript 代码嵌入到 HTML 文档的 head 和 body 里。

使用外部 JavaScript 文件,将 JavaScript 脚本代码写入一个后缀为 .js 的文件中,通过给 script 标签设置 src 属性的方式,引入这个文件。

我们这个例子的代码是在head标签里面引入 JavaScript 代码,html中的代码是编译一行就执行一行,我们已经在前面把 JavaScript这个代码已经使用完了,到后面执行html代码后,就没有这个javascipt代码了,所以就没有实现那个我们想要的javascipt代码的效果,。

解决办法:

思路一,既然是因为body标签后面没有javascipt代码,才导致的执行相关的操作,那就把相应的javascipt代码放在body标签后面就行了,例如:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>javascript之鼠标事件之按钮控制改变div盒子的背景颜色</title><style>div {width: 200px;height: 200px;border: 1px red solid;background-color: red;}</style></head><body><div id="an">可以试一下</div></body><script>var b = document.getElementById("an");b.onclick = function () {b.style.background = "#ffefa1";};</script></html>

思路二,我们可以使用window.onload() 这个方法,

window.onload() 方法用于在网页加载完毕后立刻执行的操作,即当 HTML 文档加载完毕后,立刻执行某个方法。

window.onload() 通常用于 <body> 元素,在页面完全载入后(包括图片、css文件等等)执行脚本代码。

使用window.onload()这个方法,就不用考虑javascript代码的位置了,因为使用window.onload(),只要网页加载完,就会触发相应的效果,例如,

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>javascript之鼠标事件之按钮控制改变div盒子的背景颜色</title><style>div{width: 200px;height: 200px;border: 1px red solid;background-color: red;}</style><script>window.onload=function(){var b=document.getElementById("an");b.onclick=function(){b.style.background="#ffefa1";};};</script></head><body><div id="an">可以试一下</div><button >点击</button></body></html>
本文链接地址:https://www.jiuchutong.com/zhishi/288899.html 转载请保留说明!

上一篇:若依框架搭建和使用(若依框架和jeesite)

下一篇:完美解决 Error: Cannot find module ‘@vue/cli-plugin-eslint‘ 报错(完美解决战网已休眠正在唤醒它)

  • 企业所得税应纳税额
  • 个体工商户需要交税吗?怎么交?
  • 上月有留抵税额本月怎么申报
  • 农业生产成本二级科目有福利费支出吗
  • 自然人个税申报换电脑数据怎么合并
  • 天猫收取的佣金开具的技术服务发票会计分录
  • 酒销售账务处理
  • 委托加工物资两种情况例题
  • 个人独资企业服务中心是干嘛的
  • 固定资产原值增加当月计提折旧吗
  • 无形资产研究阶段的支出全部费用化
  • 如何确定增值税
  • 会计做账中记账表怎么做
  • 预付款和现金支付的区别
  • 电话费发票个人抬头可以税前扣除
  • 小规模企业国税怎么报税
  • 如何看云空间的内容
  • 电脑开机故障不开机
  • 仓库折旧费
  • 生产企业出口退税全部流程
  • 存出投资款现金流量表选什么
  • 好的投资理财项目
  • 入账成本包括增值税税额吗
  • 公司准备上市到真正上市要多久
  • 住房公积金怎么补缴费
  • php数组函数实现机选双色球
  • 社保征集单是什么样子的
  • 牛肉炖萝卜的做法高压锅
  • phpforeach遍历二维数组
  • 车辆赔偿款收条怎么写
  • 生产费用在完工产品和在产品之间
  • yolov3 改进
  • vue-admin-master
  • 委托加工不提供原材料会计分录
  • bootstrap 栅格
  • javascript获取字符串长度
  • 蓝桥杯大赛2021
  • react5
  • 怎样利用 getnext 命令检索未知对象?
  • 研发费用加计扣除的条件
  • python elasticsearch timeout
  • ibm db2认证
  • 取得技术服务费收入会计分录
  • 纳税检查企业多缴企业所得税如何处理
  • 开办费企业所得税处理
  • 出售固定资产已开票未收款账务处理
  • 差旅费的会计处理
  • 年终奖企业应该计入哪个会计年度
  • 关于单独计价的规定
  • 小规模纳税人租赁费税率
  • 公司注销往来账要消吗
  • 定额的餐饮发票
  • vista安装图解
  • mac怎么看文件
  • keyemain.exe是什么进程
  • windows映像文件位置
  • WIN7系统怎么删除UG其它版本的许可证
  • linux版本ubuntu
  • win10mobile下载官网
  • win10如何禁用windows defender
  • win7系统配置怎么设置
  • ie10变成ie8
  • win8.1系统怎么升级到win10
  • win10系统如何创建新用户
  • bat批处理命令大全
  • js设置iframe隐藏
  • 11月编程语言排行榜出炉
  • unity3d常用代码总结
  • opengl视角跟随鼠标方向移动
  • jq判断浏览器
  • windows清除远程登录记录
  • jquery 属性
  • unity操作教程
  • unity-chan
  • void方法设置断言
  • python查询系统
  • jquery网页
  • js register
  • 房子办不了产权
  • 增+6=多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设