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

  • 转出未交增值税年末怎么转平
  • 采购无发票怎么处理
  • 现金流量表年报中的上年金额是什么
  • 金税盘递减税款2022
  • 房地产开发商需要缴纳什么税
  • 接受捐赠的固定资产计入什么科目
  • 建筑业营改增主要政策一览表
  • 未开票收入已缴税额怎么入账
  • 税务自查补缴税款算滞纳金么
  • 其他应交款入哪个科目
  • 筹建期间的费用可以扣除吗
  • 股票收入要交所得税吗
  • 增值税税率零税率
  • 全年一次性奖金税收优惠政策
  • 增值税减税措施有哪些
  • 个人抬头的医药费可以进费用吗
  • 应收账款减值准备计提比例
  • 费用,资产,成本,损失的区别
  • 无偿划拨的资产怎么做资产卡片账簿
  • 二手车抵押银行贷款
  • 不动产分期转出要交税吗
  • 财产转让所得个人所得税纳税地点
  • 专用发票可以抵扣吗
  • 教育培训费能抵扣吗
  • 同一控制下的控股合并与非同一控制下的控股合并
  • 公司收入没有进项
  • 不确认收入的是
  • 出口退税的期限是多长
  • 华为2022年资产负债表数据
  • 红字发票负数要怎么抵掉
  • php扫二维码
  • 汇算清缴应补税额为负数
  • 出差住宿费会计分录怎么做
  • 发票密码区如何调整
  • Vue 3 介绍
  • php隐藏跳转
  • 融资租赁固定资产不属于筹资活动
  • 补交上年所得税怎么调表
  • 增值税专票的开票要求
  • 土地增值税成本费用
  • 购买垃圾桶计入什么科目
  • 出纳各种费用如何归类
  • 公司向法人借款会计分录
  • phpcms不支持缩略图和水印怎么办
  • 事业单位购入固定资产当月计提折旧
  • 员工餐费补助交个人所得税吗
  • 暂估入库收到发票后摘要
  • 营业利润净利润利润总额的区别
  • 折旧方法有哪些英文
  • 实际利率法如何理解
  • 购进货物的运费税率是从主吗
  • 稀释股权违法吗
  • 购入自用的机器怎么入账
  • 行政单位如何做好机构编制工作
  • 注册公司可以代办吗法人需要到场吗?
  • mysql 表分区
  • sql %和_
  • http500内部错误
  • vs显示进程已退出
  • ubuntu下mysql的常用命令
  • mac怎么连接校园网wifi
  • 重装系统要注意哪些
  • 微软系统如何恢复出厂设置
  • win8系统游戏
  • linux中xargs的含义
  • xp没有我的电脑图标怎么办
  • 微信小程序实现微信支付
  • Scrapy框架可以用于数据挖掘、监测和自动化测试
  • python里模块
  • unity mrt
  • linux shell 数组长度
  • 迅雷继续下载
  • js判断页面是否打开
  • python项目打包发布
  • python定制函数
  • 资本公积如何转增股本的流程
  • 2020年保安证取消了吗
  • 源泉扣缴通俗
  • 新企业会计准则长期待摊费用
  • 新四板企业哪里可以查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设