js中Uncaught TypeError: Cannot set property ‘***‘ of null问题解决方法

要求:点击id为btn7按钮来获取id为bj的父节点

在如下代码中,定义了一个函数来为指定的按钮绑定单击事件,idStr为对应按钮id的值,fun为回调函数,是按钮的功能代码。

这里会报错,错误提示为:
dom查询(2).html:20 Uncaught TypeError: Cannot set property ‘onclick’ of null
at myClick (dom查询(2).html:12)
at window.onload (dom查询(2).html:16)

**注意:**在此代码中,以上错误的问题不在于myClic()函数没有写在window.onload(){…}之内,而在于调用myClick()函数时传递的实参,如下:

myClick(btn7,function(){
var bj = document.getElementById(“bj”);
console.log(bj.parentNode);
});

第一个实参传递的是对应按钮id值,是字符串,要用引号引起来,而这里直接传递的是一个变量,将btn7用引号引起来即可解决

<!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">
    <link rel="stylesheet" type="text/css" href="css/dom.css" />
    <title>Document</title>
	<script type="text/javascript">
		function myClick(idStr,fun){
	            var btn = document.getElementById(idStr);
	            btn.onclick = fun;
	        }
	        
	     window.onload = function(){
				 myClick(btn7,function(){
				 //正确代码为:myClick("btn7",function(){
	                var bj = document.getElementById("bj");
	                console.log(bj.parentNode);
	            });
	     };
	</script>
	
<body>
	<button id = "btn7">获取id为bj元素的节点</button>
	<div class="one">  
           <ul id="city">
               <li id="bj">北京</li>
               <li id="shanghai">上海</li>
               <li id="dongjing">东京</li>
               <li id="shouer">首尔</li>
           </ul>
	 </div>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 这是一个JavaScript错误,意思是无法设置null的innerhtml属性。这通常是因为你尝试在一个不存在的元素上设置innerhtml属性。你需要检查你的代码,确保你正在尝试设置正确的元素的innerhtml属性。 ### 回答2: 在编写JavaScript代码的过程,常常会遇到“uncaught typeerror: cannot set property 'innerhtml' of null”这样的错误提示。这个错误提示表示JavaScript代码尝试给一个null或undefined变量赋值,具体来说就是在JavaScript代码使用document.getElementById()方法来获取某个HTML元素的引用时,该元素不存在或者ID值写错等原因导致无法找到该元素,此时就会抛出该错误。 在解决这个错误时,我们需要检查代码document.getElementById()方法所获取的元素是否存在,可以通过console.log()输出调试信息,或者在代码添加if语句判断元素是否存在再进行操作。另外,也可能是因为代码在DOM未完全加载完成时执行,我们需要确保代码在DOM加载完成后再执行。 总之,出现以上错误时,需要认真检查代码,确保元素存在且ID正确,并添加必要的条件判断和等待DOM加载的代码,以免出现上述错误。 ### 回答3: uncaught typeerror: cannot set property 'innerhtml' of null 是一个 JavaScript 错误类型,也被称为运行时错误或异常。该错误意味着代码尝试设置一个不存在或未定义为 null 的元素的 innerHTML 属性值,从而导致了内部错误。下面将详细解释该错误的一些原因及解决办法。 1. 原因: 该错误可能是由于以下原因造成的: - 代码未找到元素。尝试在 HTML 使用 id 或类名选择器创建元素时,需要确保选择器匹配了具有正确 id 或类名的元素。如果代码尝试设置不存在的元素的 innerHTML,则会将 null 分配给元素并触发此错误。 - 代码在元素加载之前运行。如果尝试在文档加载期间运行时设置元素的 innerHTML,则可能出现该错误。这种情况下,应将代码包装在 window.onload 或 document.ready 事件,等待文档元素完全加载之后再执行操作。 - 确保代码设置了正确的属性。请注意属性名称的大小写。如果属性名或值未设置正确,则该错误可能出现。 - 变量或元素转换错误。尝试在元素实际未被分配之前读取属性或将错误类型的值赋值给该属性时,也可能触发此错误。 2. 解决方法: - 确保选择器与元素匹配:在代码确认元素是否存在,并使用正确的 id 或类名。在元素加载之前,请确保等待文档元素完全加载之后再执行操作。 - 检查属性名和元素是否存在:检查代码属性名称的拼写和大小写是否正确。确保元素存在且正确被分配了ID或者类名。 - 检查变量和数据类型:确保赋值给 innerHTML 属性的变量与 string 数据类型相符合。 综上所述,uncaught typeerror: cannot set property 'innerhtml' of null 错误提示意味着代码尝试为 null 或未定义的元素设置 innerHTML 属性,这并不合法。该错误可能由选择器与元素不匹配、属性名称或元素未分配ID或者类名等原因导致。为解决此错误,需要确认选择器与元素匹配、检查属性名称、元素是否存在以及读与分配操作的变量等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值