Question

this.innerText显示未定义

2021-02-25

825

javascript frontend

在这种情况下我尝试做级别菜单，但是 this.innerText 不起作用

function levelJump() {
    console.log(this);// Window {window: Window, self: Window, document: document, name: "", location: Location, …}
    level_index = this.innerHTML; 
    console.log(this.innerText); // undefined
    goToLevel(level_index);
}

const levelJumperButtons = document.querySelectorAll('.level-jumper');
console.log(levelJumperButtons[10].innerText); // 11
levelJumperButtons.forEach((item) => {
    item.addEventListener('click', () => levelJump());
});

Answer 1

item.addEventListener('click', () => levelJump()); 应为： item.addEventListener('click', levelJump); 因为在箭头函数中， this 绑定与箭头函数外部的绑定没有改变，并且您需要将 this 绑定到导致触发 click 事件的 item 元素。

Answer 2

正如 console.log 告诉您的那样，levelJump 函数中的“this”不是指您的 .level-jumper 元素，而是指 window 对象。

一种可能的解决方案是明确传递您的元素，如下所示：

function levelJump(item) {
    console.log(item);
    level_index = item.innerHTML; 
    console.log(item.innerText);
    goToLevel(level_index);
}

const levelJumperButtons = document.querySelectorAll('.level-jumper');
console.log(levelJumperButtons[10].innerText); // 11
levelJumperButtons.forEach((item) => {
    item.addEventListener('click', function() {levelJump(item)});
});

一个正在运行的 JsFiddle 。