位置: 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‘ 报错(完美解决战网已休眠正在唤醒它)

  • 公司注销前存货低价标准
  • 企业的税务风险研究怎么写
  • 财务工作中如何做好协同工作
  • 采购人员的费用
  • 外地预缴的增值税要在本地计算附加税吗?
  • 主营业务成本包括职工薪酬吗
  • 收到电子退库的摘要怎么写
  • 开票金额比实际金额多
  • 买二手房为什么要交个人所得税
  • 车辆报废收入如何处理
  • 公司年会聚餐的简短讲话
  • 以资抵债是利空还是利好
  • 支付员工出差住宿费
  • 或有负债记入哪个科目?
  • 进口关税专用缴款书在哪里打印
  • 房地产预缴增值税是含税还是不含税
  • 财税[2010]121号中的宗地容积率指的是什么?
  • 关于330技术维护费
  • 合理工资薪金的确认原则
  • 会计案例分析题万能模板
  • 小规模纳税人1%税收优惠
  • 减值准备可以转回是什么意思
  • 增值税谁来付
  • 销售退回如何做账
  • win7怎么转移桌面到d盘
  • won11安全启动
  • 民办非企业单位是私立还是公立
  • 结转工程成本属于什么会计科目
  • 360路由器怎么连接网络
  • php的图片
  • uniapp传值
  • 隐隐作痛怎么写
  • iis 7下安装laravel 5.4环境的方法教程
  • tensorflow gpu安装
  • php编写登陆界面
  • 预付一年的房租并收到了发票会计分录
  • 生产劳务成本会计分录
  • 收回多发的工资在上缴财政,可以用应缴财政款科目吗
  • 国家研发费用补助
  • 固定业户应当向其机构
  • 外购固定资产入账
  • 资本公积账务处理办法
  • 实收资本是什么科目
  • 疫情期间统筹部工作总结
  • 海关完税凭证如何取得
  • 境外所得税税收抵免操作指南
  • 当月没认证发票有补救措施吗
  • 员工工资计入成本怎么做账
  • 融资租赁资产承租人的账务处理
  • 小微企业要记账吗
  • 公司帮别人代缴社保要交税吗
  • 发票入账但是没付款有什么税务风险
  • 企业净利润的分配顺序
  • 市盈率为负数是说明什么呢
  • 房地产企业发行长期债券的增信方式有哪些
  • sql语句排除重复数据
  • windows8.1如何分区
  • 摄像头无法启用
  • windows优化软件
  • fedora怎么联网
  • win7怎么不显示桌面图标
  • windows10周年纪念版
  • windows8装.NET 3.5时出现0x800F0906错误解决方案
  • Win7防火墙怎么设置
  • springmvc接收form表单
  • js实现倒计时60s
  • jquery fadein 源码
  • 用jQuery实现可输入多选下拉组合框实例代码
  • dos命令批处理
  • vue中使用foreach
  • js动态改变div内容
  • 网站检测系统
  • div与script
  • 简单又实用的
  • js怎么设置字体
  • python中ans
  • jquery做菜单
  • jquery的form方法
  • 深圳税局电子税务局
  • 船舶吨税是中央税还是地方税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设