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

  • 团购网站8种可行的免费推广方式(团购网站groupon)

    团购网站8种可行的免费推广方式(团购网站groupon)

  • 华为手机怎么两个密码两个桌面(华为手机怎么两个界面切换)

    华为手机怎么两个密码两个桌面(华为手机怎么两个界面切换)

  • 苹果13怎么设置自拍不反(苹果13怎么设置来电铃声)

    苹果13怎么设置自拍不反(苹果13怎么设置来电铃声)

  • 小米温度计怎么连接手机(小米温度计怎么连接蓝牙)

    小米温度计怎么连接手机(小米温度计怎么连接蓝牙)

  • 荣耀30青春版是40w快充的吗(荣耀30青春版是荣耀30吗)

    荣耀30青春版是40w快充的吗(荣耀30青春版是荣耀30吗)

  • 苹果微信面容支付怎么设置(苹果微信面容支付后怎么还要输入密码)

    苹果微信面容支付怎么设置(苹果微信面容支付后怎么还要输入密码)

  • 怎么设置微博关注人发博提醒(怎么设置微博关注的人发动态提醒我)

    怎么设置微博关注人发博提醒(怎么设置微博关注的人发动态提醒我)

  • 电脑放大了怎么缩小(电脑放大了怎么缩小屏幕)

    电脑放大了怎么缩小(电脑放大了怎么缩小屏幕)

  • 好评后的追评怎么删掉(好评的追评怎么删除或撤回)

    好评后的追评怎么删掉(好评的追评怎么删除或撤回)

  • 京东以旧换新是先拿新手机吗(京东以旧换新是什么意思)

    京东以旧换新是先拿新手机吗(京东以旧换新是什么意思)

  • iphone最多支持几点触控(苹果最多支持多少w快充)

    iphone最多支持几点触控(苹果最多支持多少w快充)

  • 电脑替换文字怎么操作(电脑替换文字怎么取消)

    电脑替换文字怎么操作(电脑替换文字怎么取消)

  • 微信逐条转发什么后果(微信逐条转发什么内容)

    微信逐条转发什么后果(微信逐条转发什么内容)

  • 为什么苹果手机一下子就没有电了(为什么苹果手机会发烫)

    为什么苹果手机一下子就没有电了(为什么苹果手机会发烫)

  • 微信太阳笑脸代表意思(微信太阳笑脸代码怎么弄)

    微信太阳笑脸代表意思(微信太阳笑脸代码怎么弄)

  • 手机有声音但是黑屏怎么办(手机有声音但是黑屏是内屏坏了吗)

    手机有声音但是黑屏怎么办(手机有声音但是黑屏是内屏坏了吗)

  • 微信恢复大师能恢复聊天记录吗(微信恢复大师能恢复什么内容)

    微信恢复大师能恢复聊天记录吗(微信恢复大师能恢复什么内容)

  • 小米cc9e支持27w快充吗(小米cc9e支持nfc吗)

    小米cc9e支持27w快充吗(小米cc9e支持nfc吗)

  • 手机怎么屏蔽垃圾短信(手机怎么屏蔽垃圾广告短信)

    手机怎么屏蔽垃圾短信(手机怎么屏蔽垃圾广告短信)

  • win10pe是什么意思(windospe是什么)

    win10pe是什么意思(windospe是什么)

  • 蓝光水平仪与绿光区别(蓝光水平仪与绿光在室外谁更清晰)

    蓝光水平仪与绿光区别(蓝光水平仪与绿光在室外谁更清晰)

  • 苹果应用加密怎么设置(苹果应用加密怎么开)

    苹果应用加密怎么设置(苹果应用加密怎么开)

  • 犀牛工具栏怎么设置(犀牛工具栏怎么恢复)

    犀牛工具栏怎么设置(犀牛工具栏怎么恢复)

  • 转转如何退款(转转如何退款成功?)

    转转如何退款(转转如何退款成功?)

  • Win11专业版网卡驱动怎么更新?Win11网卡驱动更新步骤(win11专业版网卡安不了)

    Win11专业版网卡驱动怎么更新?Win11网卡驱动更新步骤(win11专业版网卡安不了)

  • arpaname命令  IP地址转换为对应的ARPA名称(arp-a命令怎么用)

    arpaname命令 IP地址转换为对应的ARPA名称(arp-a命令怎么用)

  • 解决node-sass下载不成功的问题(node_sass)

    解决node-sass下载不成功的问题(node_sass)

  • 既简易计税又一般计税的进项专票可以抵扣吗
  • 汽车修理公司兼职好做吗
  • 劳务报酬个税的税率是多少
  • 增值税认证勾选平台
  • 工资加计扣除时间怎么填
  • 用友u8固定资产折旧怎么生成凭证
  • 什么叫复式记账凭证
  • 房屋租赁需要交税吗?
  • 固定资产按什么价值入账
  • 发现以前年度少计提税金
  • 代扣代缴增值税纳税义务发生时间
  • 进项发票不勾选会有什么后果
  • 建筑工程增值税税率是9还是11
  • 企业不能抵扣的专票有哪些
  • 如何理解“占应纳税额10%以上”?
  • 其他应收款如何调平分录
  • 营业外收入不纳税?
  • 总部员工调往下属单位
  • 营业成本主要包括
  • 上个月开票这个月确认收入
  • 财产租赁所得的税率是多少
  • win10指纹传感器在哪里
  • 错账按产生原因来看有两种
  • 退货发票会作废吗
  • PHP:session_write_close()的用法_Session函数
  • 苹果电脑录屏带麦克风
  • 以固定资产对外投资影响现金流量吗
  • PHP:file_get_contents()的用法_Filesystem函数
  • PHP:finfo_file()的用法_fileinfo函数
  • 现金长款怎么做会计分录
  • 自然vc
  • 计算所得税费用公式excel
  • 期初未缴税额有数字怎么处理
  • JS XMLHttpRequest对象详解
  • 代理业务资产的核算方法
  • vue 如何使用
  • adan算法
  • umount命令详解
  • Yii中的relations数据关联查询及统计功能用法详解
  • 免征个人所得税33种情形
  • clock set命令
  • 支付第三方劳务费计入什么科目
  • 会计制度备案附件要上传什么
  • 社会团体税收政策
  • 一般纳税人开发票给小规模纳税人
  • 企业盘盈的固定资产其核算的会计科目是
  • 本年利润借方红字代表什么意思
  • 公允价值怎么记账
  • 帝国cms怎么用
  • sql自增1
  • 没有购销合同的原因有哪些
  • 跨省市提供建筑服务
  • 多付的账款计入什么科目
  • 单位安装摄像头合法吗
  • 缴纳残保金工资是实发工资还是应发工资
  • 递延所得税资产是什么意思
  • 加盟费收入如何入账
  • 待抵扣增值税退税
  • 支付单位结算卡费用计入什么科目
  • 做账财务费用负数
  • 记账凭证附件的作用
  • fedora修改ip地址
  • xp双系统怎么设置默认系统
  • xp系统修复怎么操作
  • centos7手册
  • onionwormimmune.exe是什么
  • win1020h2版好不好
  • win7 netplwiz
  • 阿J的cocos2d-x学习笔记-元素消消看(四)-可发展的空间及游戏开发中的问题
  • excel表格时间选择
  • 基于怎么用
  • perl $?
  • 64位Win7环境下vs2013配置opengl
  • c# 抽象类的作用
  • 用简单的方法做好玩的手工视频教程
  • jQuery插件是什么
  • JavaScript中的6种运算符总结
  • python 观察者
  • 运输公司抵扣
  • 工会经费计提比例0.8%
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设