Question

我正在尝试将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：无法获取未定义或空引用的属性'textContent'

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;
    });
}

无法获取未定义或空引用的属性“ textContent”

1 个答案: