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】即可！

解决结果如下图：