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

  • 进口缴纳关税
  • 劳务报酬个税的税率是多少
  • 假发票是怎么开出来的
  • 合并报表会计未分配利润怎么填写?
  • 为员工代缴社保材料
  • 公账的钱取现金
  • 工程材料票抵扣比例
  • 生产型企业直接进口产品是否可直接出口
  • 个人开具发票需要税号吗
  • 增值税税控服务费的账务处理
  • 换出资产为存货为什么不
  • 纳税申报现金流量表报错了可以重新申报吗
  • 收取违约金如何开具发票
  • 交易性金融资产借贷方向
  • 事业单位存货盘亏会计分录
  • 培训学校预收学费要交税吗
  • 企业给员工缴纳的五险最低交多少
  • 增值税税控系统的税务处理
  • 实收资本印花税税率
  • 单位不发工资怎么解决要什么证据
  • 外包的人力费用包括哪些
  • 应收股利属于其他业务吗
  • 面粉厂怎样做帐,税率是多少?
  • 企业资产损失会计处理
  • 应收账款坏账准备是信用减值损失还是资产
  • 我公司以房产土地为主
  • 联想电脑bios启动项设置方法
  • Linux中终止某个用户的所有进程的简单方法
  • 电脑搜索功能不准确
  • linux的基础知识
  • 宽带连接错误代码691
  • 房贷每月利息如何算
  • php web3
  • oeloader.exe - oeloader是什么进程 有什么用
  • slee401.exe - slee401是什么进程 有什么用
  • 进项税和销项税谁交
  • 企业管理费用的构成
  • 税务局开出来的发票没问题吧?
  • 注销公司需要缴纳注册资金吗
  • 文化事业建设费减免政策
  • phpemail正则
  • 如果收到房租的说说
  • ctf web题型
  • 投喂小鸟
  • 基于web的网站设计与实现
  • 海关进口增值税计入什么科目
  • vue中事件
  • python自动控制
  • 一般纳税人季报还是月报
  • 设计模式适配器模式代码编写
  • 树结构ADT知识点思维导图
  • 增值税发票上多了一个点能刮掉吗
  • 企业租赁厂房需要交什么税
  • sql server rollup函数
  • 成本票和进项票举例说明
  • 小规模教育培训怎样纳税
  • 应收账款损失率计算公式
  • 普通发票和增值税普通发票一样吗
  • 完税凭证抵扣进项税额分录
  • 城建税教育费附加和地方教育费附加
  • 增值税当月缴纳还是次月缴纳
  • 带息票据贴现账务处理
  • 党费返还款怎么做分录
  • 公司名下没有车可以办油卡吗
  • 捐赠支出算费用吗
  • 新建厂房哪些费用可以计入
  • windowsxp搜索不到文件
  • 进程registry
  • 如何查看苹果mac系统
  • linux文件操作常用命令
  • docker 开源项目
  • shutdown命令不能运行
  • perl中@_
  • linux shell终端
  • vue miniui
  • flask使用celery
  • cocos2d怎么用
  • js怎么设置字体
  • 地税局书记是什么级别
  • 法人没有实名认证,现在要变更,还需要实名认证吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设