位置: IT常识 - 正文
Uncaught TypeError TypeError: Cannot set properties of null (setting ‘onclick‘)的解决办法
发布时间：2024-01-07推荐整理分享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 呢？🤔
引入方式与 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>下一篇：完美解决 Error: Cannot find module ‘@vue/cli-plugin-eslint‘ 报错(完美解决战网已休眠正在唤醒它)
