博客列表 >解决js报错 Cannot read property innerHTML of null

解决js报错 Cannot read property innerHTML of null

樂成的开发笔记
樂成的开发笔记原创
2019年07月19日 14:25:406760浏览

1、相信很多同学在开发过程中都会遇到
Cannot read property 'innerHTML' of null ——这个报错的字面含义是:不能读取空的内部HTML。

2、实际上,在页面的HTML结构中,innerHTML是有实际的值并可以在console进行获取查询到。

3、根据浏览器的渲染原理,HTML代码从上到下执行代码,当浏览器JS解析器解析到script并进行DOM操作,下面的DOM结构还没有进行搭建。那么就会提示不能正确读取内部的HTML信息。

4、解决思路:将涉及DOM读取部分的script放在DOM结构后面。</body>标签前面。或者在前置的script标签写明:window.onload等,确保DOM树加载完毕后再执行这段script代码。

5、下面示例注释了顺序,可以理解一下

实例

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<script type="text/javascript">
window.onload=function(){
	var oDiv = document.getElementById('ranking');
	if(Number(oDiv.innerHTML) <= 30){
		alert('3ok'+oDiv.innerHTML);//3加载完成打印3
	}
}
</script>
<script type="text/javascript">
	var oDiv = document.getElementById('ranking');
	if(Number(oDiv.innerHTML) <= 30){
		alert('1ok'+oDiv.innerHTML); //1报错Uncaught TypeError: Cannot read property 'innerHTML' of null
	}
</script>
<body>
	<div class="row">
		<div class="col-lg-12">
			<div class="form-group mb-3">
				<div class="form-control text-center" >您的积分总和为:9527 当前排名第<span id="ranking">30</span>位</div>
			</div>
		</div> <!-- end col -->
	</div>
</body>
<script type="text/javascript">
	var oDiv = document.getElementById('ranking');
	if(Number(oDiv.innerHTML) <= 30){
		alert('2ok'+oDiv.innerHTML); //2文本流顺序打印2
	}
</script>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议
Mr.Lv2019-07-19 14:45:281楼
谢谢你 你的实例我运行 的确可以 关于错误的提示百度一搜一大把解释 不知道为什么我的代码里就获取不了 还是一样为空置 没有解决 把js放在前后我都试过了 不行