求助：Uncaught ReferenceError: displayText is not defined错误排查

报错Uncaught ReferenceError: displayText is not defined的核心原因有两个：

1. 事件监听的回调用了普通函数，导致this指向触发点击的DOM元素，而非Clickables类的实例，所以找不到类方法displayText和实例属性messages。
2. 直接调用displayText和访问messages，没有通过类实例的上下文。

修复步骤 #

1. 修正事件回调的上下文 #

把事件监听的普通函数改成箭头函数，箭头函数会继承外层的this（也就是Clickables实例），或者在循环前先保存实例的this。

2. 正确调用类方法与访问实例属性 #

调用displayText时要写this.displayText，访问消息数组要写this.messages。

优化后的关键代码 #

update(startButtonPressed) {
    if (startButtonPressed && !this.doOnce) {
        this.doOnce = true;
        const instance = this;
        for (let i = 0; i < this.clickables.length; i++) {
            const element = this.clickables[i];
            // 用箭头函数保留类实例的this上下文
            element.addEventListener('click', (event) => {
                event.preventDefault();
                // 直接通过循环索引关联元素与对应消息，省去冗余判断
                instance.displayText(instance.messages[i]);
            }, false);
        }
    }
}

额外逻辑修正 #

原displayText方法中this.textDisplaying初始值为false，第一次调用时if(this.textDisplaying)不会执行，导致定时器无法触发、消息无法自动隐藏，修正如下：

displayText(message) {
    this.eventRect.style.display = "none";
    message.style.display = "flex";

    if (!this.textDisplaying) {
        this.textDisplaying = true;
        setTimeout(() => {
            this.eventRect.style.display = "initial";
            message.style.display = "none";
            this.textDisplaying = false;
        }, 5000);
    }
}

内容的提问来源于stack exchange，提问作者Jleger91