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

  • 华为手环7可以看微信消息吗(华为手环7可以玩游戏吗)

    华为手环7可以看微信消息吗(华为手环7可以玩游戏吗)

  • 苹果负一屏怎么打开(苹果负一屏怎么设置好看)

    苹果负一屏怎么打开(苹果负一屏怎么设置好看)

  • 微信二狗表情怎么发(微信二狗表情怎么弄)

    微信二狗表情怎么发(微信二狗表情怎么弄)

  • iphonex可以使用nfc吗(iphonex可以使用无线充电吗?)

    iphonex可以使用nfc吗(iphonex可以使用无线充电吗?)

  • ipad亮度突然自动变暗(ipad亮度突然自动变暗(ipad亮度突然变暗)怎么解决)

    ipad亮度突然自动变暗(ipad亮度突然自动变暗(ipad亮度突然变暗)怎么解决)

  • 陌陌注销审核要多久(陌陌 注销 审核)

    陌陌注销审核要多久(陌陌 注销 审核)

  • ipad air1上市时间(ipad air2上市时间)

    ipad air1上市时间(ipad air2上市时间)

  • 显示器闪屏自修方法(显示器闪屏是怎么回事?)

    显示器闪屏自修方法(显示器闪屏是怎么回事?)

  • s11-160/10表示什么意思(s11_160/10)

    s11-160/10表示什么意思(s11_160/10)

  • 荣耀20s与荣耀20青春版对比(荣耀20s与荣耀20屏幕哪个好)

    荣耀20s与荣耀20青春版对比(荣耀20s与荣耀20屏幕哪个好)

  • 快手超级管理员有几个(快手超级管理员怎么设置)

    快手超级管理员有几个(快手超级管理员怎么设置)

  • gt和gtx有什么区别

    gt和gtx有什么区别

  • 微信打标是什么意思(啥是微信打标)

    微信打标是什么意思(啥是微信打标)

  • ipad声音变耳机模式如何设回(ipad声音变耳机是怎么回事)

    ipad声音变耳机模式如何设回(ipad声音变耳机是怎么回事)

  • 华为锁屏显示时间怎么设置(华为锁屏显示时间怎么调)

    华为锁屏显示时间怎么设置(华为锁屏显示时间怎么调)

  • vivo手机安全模式解除(vivo手机安全模式在哪里关)

    vivo手机安全模式解除(vivo手机安全模式在哪里关)

  • oppok3什么时候上市(oppok3什么时候上市的手机怎么知道?)

    oppok3什么时候上市(oppok3什么时候上市的手机怎么知道?)

  • 华为9x摄像头怎么伸缩(华为9x摄像头怎么打开)

    华为9x摄像头怎么伸缩(华为9x摄像头怎么打开)

  • pr怎么调节分辨率(pr怎么设分辨率)

    pr怎么调节分辨率(pr怎么设分辨率)

  • 快手怎么弄特别关注一个人(快手特别设置在哪里)

    快手怎么弄特别关注一个人(快手特别设置在哪里)

  • ps反相快捷键(ps下一页)

    ps反相快捷键(ps下一页)

  • 手机QQ接收不到消息通知(手机qq接收不到图片)

    手机QQ接收不到消息通知(手机qq接收不到图片)

  • 苹果6照相机声音怎么关(苹果照相机声音怎么没有声音了)

    苹果6照相机声音怎么关(苹果照相机声音怎么没有声音了)

  • 耳机插在电脑上没有声音怎么办?(耳机插在电脑上有滋滋的声音)

    耳机插在电脑上没有声音怎么办?(耳机插在电脑上有滋滋的声音)

  • Win10 Dev 预览版 20279(FE_RELEASE)更新详解(win10 dev版本)

    Win10 Dev 预览版 20279(FE_RELEASE)更新详解(win10 dev版本)

  • 文本模式命令提示符版安装CentOS 6.5的图文方法(文本模式是什么意思?)

    文本模式命令提示符版安装CentOS 6.5的图文方法(文本模式是什么意思?)

  • 格里博耶多夫运河和滴血救世主教堂,俄罗斯圣彼得堡 (© Tomas Sereda/Getty Images)(格里戈里耶奈尔尤伯夫)

    格里博耶多夫运河和滴血救世主教堂,俄罗斯圣彼得堡 (© Tomas Sereda/Getty Images)(格里戈里耶奈尔尤伯夫)

  • Auto.js的介绍(auto.js 教程)

    Auto.js的介绍(auto.js 教程)

  • 固定资产清理借方余额是加还是减
  • 抵消损益分录
  • 盘盈的固定资产怎么做账务处理
  • 公司购买金蝶属于什么费用
  • 小微企业印花税减免最新政策
  • 公司入股资金有发票吗
  • 电子税务局助信码领取后怎么用
  • 外购商品用于赠送分录
  • 建筑业一般计税税率
  • 税收的优惠性政策包括哪些
  • 什么税不计入税金及附加科目
  • 个人可支配收入缩写
  • 资本回收系数等于什么系数与利率之和
  • 现金短缺溢余求借多少短期借款?
  • 冲减应收帐款分录
  • 小规模纳税人开具1%增值税专用发票可以抵扣吗
  • 出差票据应该如何记账
  • 软件企业涉税风险分析
  • 企业税收案例分析
  • 固定资产领用材料进项税处理
  • 个人房补申请书怎么办
  • 中意装饰工程有限公司怎么样
  • 建筑挂靠管理费用如何账务处理?
  • 研究开发费用扣除标准
  • 审计报告格式与范文怎么写?
  • 核定征收的企业利润怎么处理
  • 员工个税需要计提吗现在
  • Win10系统cpu性能如何调高 Win10把cpu性能调到极佳的方法
  • Mac怎么禁用icloud
  • PHP:oci_statement_type()的用法_Oracle函数
  • 购买商城购买化肥
  • php文本转数字
  • sec是什么文件
  • 基于中国国情的中国式现代化具有哪些特色
  • 税务机关如何判别c开发票视频
  • 小规模纳税人工商年报网上怎么报
  • 装修费计入固定资产还是长期待摊
  • 银行汇票和银行本票的区别
  • 银行转账费用试算失败什么意思
  • 宣传活动费用什么发票开?
  • vgdisplay命令无效
  • 公司的归属权
  • 发票校验码二维码看不到了怎么查
  • 房屋发票备注栏怎么填
  • sql server 视图排序
  • 外币账户的设置在哪里
  • 小规模纳税人的条件
  • 建筑业周转材料
  • 工人发生工伤的责任划分
  • 税务滞纳金计入什么会计科目
  • 承兑汇票兑现账户是什么
  • 应收账款多久收不回来作为坏账
  • 借用别人公司
  • 记账凭证背面贴原始凭证图片
  • 给对方承兑对方不承认怎么办
  • 蓝字发票怎么作废
  • 发票提前开能入费用吗?
  • 个体工商户在什么情况下需要纳税
  • sqlserver自动生成id
  • 在linux系统中,用来存放系统所需要的配置文件和子目录
  • solaris11.4安装教程
  • win10周年纪念版
  • Win8.1 32位和64位有什么区别 Win8.1 32位和64区别详细介绍
  • android 开发 教程
  • java程序员练手项目
  • 微信小程序用户名怎么改名
  • 微信小程序实现人脸识别
  • bash linux命令
  • shell 替换文件中匹配的内容
  • jquery操作
  • python中str的用法
  • unity dem
  • nodejs搭建个人博客网站
  • 让你略表情包
  • python中创建自定义函数
  • 如何判断python列表长度
  • 国税局江西省税务局
  • 代理记账报税违法吗
  • 小规模六税两费减免分录
  • 图书行业税率多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设