JS控制台显示cannot read property ‘getElementsByTagName‘ of null怎么解决

已于 2022-07-12 17:43:46 修改
阅读量1.1k 收藏 1
点赞数
于 2022-07-12 16:23:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nuanpang/article/details/125745584
版权

javascript 开发语言 ecmascript

事件说明：

自己动手写了个js，运行，控制台报错：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全选</title>
		<script>
			var cbAll = document.getElementById("cbAll");
			var tbs = document.getElementById("tb").getElementsByTagName("input");
			cbAll.onclick=function(){
				console.log(cbAll.checked);
				for(var i = 0;i < tbs.length;i++){
					tbs[i].checked=cbAll.checked;
				}
			}
		
			for (var i = 0;i < tbs.length;i++){
				tbs[i].onclick=function(){
					var flag=true;
					for (var i = 0;i < tbs.length;i++){
						if(!tbs[i].checked){
							flag = false;
						}
					}
					cbAll.checked=flag;
				}
			}
		
		</script>
	</head>
	<body>
		<table class="box">
			<thead>
				<tr>
					<th><input type="checkbox" id="cbAll" ></th>
					<th>价格</th>
					<th>商品</th>
				</tr>
			</thead>
			<tbody id="tb">
				<tr>
					<td>
						<input type="checkbox">
					</td>
					<td>
						30
					</td>
					<td>
						荔枝
					</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox">
					</td>
					<td>
						29
					</td>
					<td>
						哈密瓜
					</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox">
					</td>
					<td>
						28
					</td>
					<td>
						苹果
					</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

 查了一下，很多网友说是因为导航栏部分没有设置id导致。
后来发现是script放在了head中，如果没有设置window.onload，那么JS在html加载之前就会被解析，相应的就取不到html中的元素了。所以把js相关代码放到相关html后面就好了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全选</title>
		
	</head>
	<body>
		<table class="box">
			<thead>
				<tr>
					<th><input type="checkbox" id="cbAll" ></th>
					<th>价格</th>
					<th>商品</th>
				</tr>
			</thead>
			<tbody id="tb">
				<tr>
					<td>
						<input type="checkbox">
					</td>
					<td>
						30
					</td>
					<td>
						荔枝
					</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox">
					</td>
					<td>
						29
					</td>
					<td>
						哈密瓜
					</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox">
					</td>
					<td>
						28
					</td>
					<td>
						苹果
					</td>
				</tr>
			</tbody>
		</table>
		
		<script>
			var cbAll = document.getElementById("cbAll");
			var tbs = document.getElementById("tb").getElementsByTagName("input");
			cbAll.onclick=function(){
				console.log(cbAll.checked);
				for(var i = 0;i < tbs.length;i++){
					tbs[i].checked=cbAll.checked;
				}
			}
		
			for (var i = 0;i < tbs.length;i++){
				tbs[i].onclick=function(){
					var flag=true;
					for (var i = 0;i < tbs.length;i++){
						if(!tbs[i].checked){
							flag = false;
						}
					}
					cbAll.checked=flag;
				}
			}
		
		</script>
		
	</body>
</html>

也可以不改顺序，通过设置window.onload 来运行。设置window.onload 的作用是：使js代码在确保页面加载完成后再进行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全选</title>
		
		<script>
		window.onload=function(){
			var cbAll = document.getElementById("cbAll");
			var tbs = document.getElementById("tb").getElementsByTagName("input");
			cbAll.onclick=function(){
				console.log(cbAll.checked);
				for(var i = 0;i < tbs.length;i++){
					tbs[i].checked=cbAll.checked;
				}
			}
					
			for (var i = 0;i < tbs.length;i++){
				tbs[i].onclick=function(){
					var flag=true;
					for (var i = 0;i < tbs.length;i++){
						if(!tbs[i].checked){
							flag = false;
						}
					}
					cbAll.checked=flag;
				}
			}
		}		
		</script>
	</head>
	<body>
		<table class="box">
			<thead>
				<tr>
					<th><input type="checkbox" id="cbAll" ></th>
					<th>价格</th>
					<th>商品</th>
				</tr>
			</thead>
			<tbody id="tb">
				<tr>
					<td>
						<input type="checkbox">
					</td>
					<td>
						30
					</td>
					<td>
						荔枝
					</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox">
					</td>
					<td>
						29
					</td>
					<td>
						哈密瓜
					</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox">
					</td>
					<td>
						28
					</td>
					<td>
						苹果
					</td>
				</tr>
			</tbody>
		</table>	
	</body>
</html>

暖暖胖胖
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js getElementsByTagName的简写方式
10-29
用最少的代码,做最多的事情. getElementsByTagName的简写方法.
Error in v-on handler: “TypeError: Cannot read properties of null (reading ‘getElementsByTagName‘)“
qq_57305148的博客
02-28 4539
在表格导出的时候出现这个错误，是因为把id获取错误 因为封装的方法里有id,但是页面上面没有找到，所以报错 /** * 导出 * @param mainTitle 主标题 * @param subTitle 副标题 * @param reqData * @returns {any} */ exportTable(mainTitle,subTitle,reqData){ /* generate workbook object from table */
Uncaught TypeError: Cannot read property ‘getElementsByTagName‘ of null
qq_59649602的博客
08-01 351
我将这个js代码放在</body>之后就可以了
Cannot read property 'getElementsByTagName' of null解决办法
IT界幼稚生的博客
11-12 1万+
问题： 在浏览器中调试js代码出现“Cannot read property 'getElementsByTagName' of null”错误。 解决方法： 使用xxx.getElementsByTagName需要给xxx添加一个id属性。 ...
Cannot read property 'getElementsByTagName' of null
十里春风不如你
05-02 2万+
在调试JS代码的过程中遇到错误：Cannot read property ‘getElementsByTagName’ of null 如下图： 修改为：document.getElementsByTagName（’li’）; 原因：getElementsByTagName是document的方法，只能通过document调用
Uncaught TypeError: Cannot read property 'getElementsByTagName' of null
u010289760的博客
11-21 1万+
在做一个一个tab选项卡时，在window.onload中获取几个参数，代码为：              //获取鼠标滑过或点击的标签和内容的元素     var titles=$('notice-tit').getElementsByTagName('li'),    divs=$('notice-con').getElementsByTagName('div'); 结果报错：Unca
Uncaught TypeError: Cannot read properties of null (reading ‘getElementsByTagName‘)
哈哈
05-20 5299
想要鼠标悬停，li标签变色 var ps= document.getElementById("navigation").getElementsByTagName("li"); for (var i in ps) { ps[i].onmouseover = function () { this.setAttribute("class","active"); } ps[i].onmouseou
Uncaught TypeError: Cannot read property ‘getters‘ of undefined
weixin_44624120的博客
05-04 7170
记录一下写登录时 ，出现的这个问题 因为store下 modules 下的 js文件已建好（但未写入代码（state,mutations,actions）） 而是建好后，先把 store 下index.js 文件的代码先行写了：如下 但是，还是没有解决 后面实在没办法，把这些新建的文件和代码一一给去掉或者注释掉，用回新建vuex 时的路由时，发现页面能进入了 然后慢慢排除，发现在获取modulesName及modulesPath 时 ，是有的。但是，再往下 value 值是为空对象， 到了这我就想（这
android webView 图片加载不出来 后台报错Uncaught TypeError: Cannot call method 'getElementsByTagName' of null
bufanni12的专栏
03-11 3365
在之前，webView加载图片完全没有问题。直到前端H5开发换新的加载图片的方式，导致图片忽然加载不出来了。 从后台日志看到了webview 打印了报错信息 Cannot call method 'getElementsByTagName' of null 我怀疑是不是由于此处报错终止了图片加载的进程。 分析此处错误出现的原因： 由于调用的H5界面的js其中的写法不规范，we
javascript getElementsByTagName
10-28
`getElementsByTagName` 是 JavaScript 中用于遍历 HTML 文档中指定标签名的所有元素的函数。这个方法在处理DOM（Document Object Model）时非常有用，因为它允许开发者根据元素的标签名称来筛选和操作一组元素。在...
javascript实现点击后变换按钮显示文字的方法
10-24
这段代码演示了一个简单的JavaScript事件处理机制，包括事件监听器的添加和事件处理函数的执行。此外，它还展示了如何通过DOM操作来修改网页元素的属性，如改变按钮的文本内容。这种技术在创建动态网页时非常常见，...
javaScript实现世界各地时间显示
10-14
在本文中，我们将探讨如何使用JavaScript实现世界各地时间的显示。这个功能可以帮助用户了解不同地区的当前时间，这对于国际化的网站或应用尤其有用。 首先，我们需要在HTML中创建一个布局，用于显示各个城市的时钟...
js中getElementsByClassName和getElementsByTagName无法获取元素
Jclam的博客
03-07 1876
js中getElementsByClassName和getElementsByTagName无法获取元素
解决 ECharts 报错 “Cannot read properties of null (reading ‘getAttribute‘)“ 的方法
pleaseprintf的博客
07-26 8298
在使用 ECharts 进行数据可视化时，有时会遇到错误信息 “Cannot read properties of null (reading ‘getAttribute’)”。这个错误通常发生在 ECharts 绘制图表时，指示某个元素为 null，导致无法读取属性。本文将详细介绍出现这个错误的原因，并提供解决方法，确保正确使用 ECharts，避免该错误的发生。
提示错误Cannot read properties of null (reading ‘value‘)
m0_67402125的博客
03-02 6050
出现这个错误，是因为把id获取错误，改过来便可。 <input type="text" id="txt"> var txt = document.getElementById("text");// txt写成text <body> <p> <input type="text" id="txt"> <button id="btnAdd">添加</button> </p>
项目踩坑日记：Echarts二次渲染报错：setOption时提示 Cannot read property ‘id‘ of undefined”
weixin_44401614的博客
09-08 5622
Echarts二次渲染报错：setOption时提示 Cannot read property ‘id‘ of undefined” 的解决方案
微信小程序的组件中使用了字体图标 手机端报错Cannot read property ‘getElementsByTagName‘ of undefined TypeError
web
04-15 2010
小程序手机端报错： Cannot read property 'getElementsByTagName' of undefined TypeError: Cannot read property 'getElementsByTagName' of undefined at getElementsByTagName (asset/download/font_bbb9ii6dq5/iconfont.js:1:16861) at 你是不是使用微信开发工具没有任何的报错，结果也没有问题，但是预览的时候出现了问题
TypeError: Cannot read property 'xxxx' of undefined的解决方法
热门推荐
静幽水
10-12 9万+
TypeError: Cannot read property ‘length’ of undefined
vue ref和reactive区别
最新发布
灰海
08-25 364
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
Cannot read properties of null (reading 'getElementsByTagName')
05-18
这个错误通常出现在尝试访问一个不存在的元素或节点时。有几种可能的原因： 1. 你正在访问一个不存在的元素。请确保你的代码正确地引用了DOM元素，并且该元素确实存在。 2. 你的代码可能在页面加载之前运行。请确保你的代码在页面加载完成后运行，或者在文档就绪后再运行代码。 3. 你的代码可能正在访问一个尚未准备好的元素。请确保你的代码在元素完全加载并准备好之后再运行。 4. 如果你的代码是在iframe或其他框架中运行，请确保你正在访问正确的文档对象。 你可以使用浏览器的开发工具来调试代码并找到出错的地方。也可以在代码中添加一些console.log语句来打印变量和查看代码执行过程中的输出结果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值