javascript解决【Uncaught TypeError: Cannot read property ‘style‘ of undefined at HTMLHeadingElement.】问题

1、首先我随机选取的一种存在此问题的代码,其代码如下:

var aList = document.querySelectorAll(".F-nav-li h2");
    var aHide = document.querySelectorAll(".F-hide-1");
    for(var i = 0; i < aList.length; i++){   //  从哪来  到哪结束 怎么去
        aList[i].onclick = function(){  // 鼠标点击事件
            console.log("你是个牛",i); 
            aHide[i].style.height = "125px";//此时会产生报错,报错原因是由于i的取值越界了!
        }

    }

2、当你运行完成并且点击的时候相应的按键时,会出现如下问题,如图:

3、这i的取值超过了aList.length!这是为什么?通常将这类问题称为【取值越界问题】!

产生原因:由于浏览器在解析js文件时,是从上至下进行解析。但是在js中有一种情况例外,就是鼠标点击事件。因为在网页运行出来后,点击事件不会被执行。

如上图中当浏览器解释到for循环中的onclick时,就终止了,然后把相应的信息存放在方框内,然后一直循环,直至【i=aList.length】不满足循环条件时,跳出循环;然后,向下继续执行,因此造成了此类问题!

4、此类问题的解决方法有很多种,下面仅仅列出一种方法,希望对大家有帮助!

 var aList = document.querySelectorAll(".F-nav-li h2");
    var aHide = document.querySelectorAll(".F-hide-1");

    for(var i = 0; i < aList.length; i++){   //  从哪来  到哪结束 怎么去
         /*
            第一次循环: aList[0].index = 0; 
            第二次循环: aList[1].index = 1; 
            第三次循环: aList[2].index = 2; 
            用于保存相应的下标【index】
        */
        aList[i].index = i;  // 自定义属性用于保存相应的下标
       
        aList[i].onclick = function(){  // 鼠标点击事件

            console.log("你是个牛",this.index);  //this指针,指哪打哪 !this.index将获取一对一的下标

            aHide[this.index].style.height = "125px";//此时会产生报错,报错原因是由于i的取值越界了!
        }

    }
 

解决方案:自定义属性,用来保存相关的下标信息,然后使用this指针指定到相关的下标【index】即可!

解决结果如下图:

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值