javascript - 无法获取未定义或空引用的属性 'textContent'

Question

这个问题已经有答案了:

JavaScript closure inside loops – simple practical example (45 个回答)

已关闭 4 年前。

我正在尝试 menuSelected.textContent (这是我唯一的 h4 )更改为 textContent我从菜单中选择的选项是什么。我收到此错误，我想知道我做错了什么。你们可以帮我吗？谢谢。

我尝试过设置menuSelected.textContent = menu[0].textContent在循环之前，但是当我单击其他菜单(菜单[1]、菜单[2]等)时它不会改变

var menu = document.querySelectorAll(".menu a");
var menuSelected = document.querySelector("h4");

//menu controls

for(var i = 0; i < menu.length; i++){
    menu[i].addEventListener("click", function(){
        menuSelected.textContent = menu[i].textContent;
    });
}

控制台显示此错误:

0: Unable to get property 'textContent' of undefined or null reference

Answer 1

我猜问题是您用来生成菜单元素的点击监听器的 for 循环。

for(var i = 0; i < menu.length; i++){
    menu[i].addEventListener("click", function(){
        menuSelected.textContent = menu[i].textContent;
    });

}

i 是一个局部变量，在点击事件回调函数中不可用。嗯，实际上是这样，但它保存了在 for 循环中递增后的最后一个值，该值始终是数组长度。因此，如果您尝试访问 menu[i].textContent，它会尝试访问数组边界之外的元素。

您需要为函数提供特殊的 e 参数，该参数保存事件和触发事件的对象:

for(var i = 0; i < menu.length; i++){

    menu[i].addEventListener("click", function(e){
        menuSelected.textContent = e.target.textContent;
    });
}