Study笔记

Uncaught TypeError: Cannot set property 'onclick' of null解决办

如果把js内容直接放在这个head标签以内,button按钮不能正常点击更换body的背景颜色,报错提示:demo6.html:16 Uncaught TypeError: Cannot set property 'onclick' of null,分析解决办法如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击背景变色js事件问题</title>
<style type="text/css">
button{
cursor: pointer;
}
</style>
<script>
// 问题描述,如果直接把这下面段代码放在页面这里,控制台提示Uncaught TypeError: Cannot set property 'onclick' of null
obj=document.getElementById('dj');
obj.onclick=function(){
document.body.style.background='#f90';
}
// 解决办法二:
// window.onload = function () {
// var Btn = document.getElementById('dj');
// Btn.onclick = function () {
// console.log("push the button ");
// document.body.style.background='#f90';
// }
// }
</script>
<body>
<button id="dj">点击</button>
</body>
<!-- <script type="text/javasript"> -->
<!-- 相关问题:<script></script> vs/or <script type=”text/javasript”></script>
如果用H5就不需要加,因为H5默认属性就是text/javascript,
而 HTML 4.01 and XHTML 1.0 规范 type 属性是需要的,如果用H5<script></script>是可以且比较好的选择。最重要一点是加了不起作用也不报错 -->

<!-- 解决办法一: -->
<!-- <script>
obj=document.getElementById('dj');
obj.onclick=function(){
console.log('测试');
alert('Surprise')
document.body.style.background='#f90';
}
</script> -->
</html>

问题归纳总结:第一种解决办法直接js文件放在页面底部加载,第二种window onload()包裹起来,出现问题原因:W3School中介绍浏览器先加载完按钮节点才执行JS,当浏览器自顶向下解析时,找不到onclick绑定的按钮节点了,网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,。window.onload是一个事件,window.onload表示页面加载完成后执行的函数,js按照页面自上而下的顺序说明的,页面上的Javascript代码是HTML文档的一部分,所以Javascript在页面装载时执行的顺序就是其引入标记!

参考网址:oito 王大锤子呦 lily2016n

相关文章

个人简介

说的再好不如做的漂亮

标签聚合