PyTorch聊天机器人集成Flask遇前端TypeError问题求助

问题诊断 #

报错核心原因是DOM元素引用错误和语法错误：

1. Uncaught TypeError: Cannot read properties of undefined (reading 'querySelector')：display方法中解构的chatBox未在args中定义，导致后续调用chatBox.querySelector失败。
2. Uncaught TypeError: Cannot read properties of undefined (reading 'classList')：点击按钮时传递的chatBox是undefined，无法调用classList方法。
3. 其他隐藏问题：onSendButton中错误引用类名Chatbox而非实例元素、updateChatText中HTML标签拼接缺失引号和闭合符号。

修复步骤 #

1. 修正DOM元素引用定义 #

修改app.js中Chatbox类的constructor，将原closeButton替换为chatBox，对应页面中的.chatbox__support容器：

constructor() {
    this.args = {
        openButton: document.querySelector('.chatbox__button'),
        chatBox: document.querySelector('.chatbox__support'), // 替换原closeButton
        sendButton: document.querySelector('.send__button')
    }

    this.state = false;
    this.messages = [];
}

2. 修正display方法的解构和事件绑定 #

确保display方法中解构正确的chatBox，并绑定事件时传递有效元素：

display() {
    const { openButton, chatBox, sendButton } = this.args; // 解构正确的chatBox

    openButton.addEventListener('click', () => this.toggleState(chatBox))

    sendButton.addEventListener('click', () => this.onSendButton(chatBox))

    const node = chatBox.querySelector('input');
    node.addEventListener("keyup", ({ key }) => {
        if (key === "Enter") {
            this.onSendButton(chatBox)
        }
    })
}

3. 修正onSendButton中的元素引用 #

将Chatbox.querySelector改为chatbox.querySelector（使用传入的参数而非类名）：

onSendButton(chatbox) {
    var textField = chatbox.querySelector('input'); // 修复元素引用
    let text1 = textField.value
    if (text1 === "") {
        return;
    }

    // 其余代码保持不变...
}

4. 修正updateChatText中的HTML标签语法 #

修复标签拼接时的引号缺失、类名拼写错误和标签闭合问题：

updateChatText(chatbox) {
    var html = '';
    this.messages.slice().reverse().forEach(function (item) { // 移除多余逗号
        if (item.name === 'Sam') {
            html += '<div class="messages__item messages__item--visitor">' + item.message + '</div>' // 补全引号和闭合标签
        } else {
            html += '<div class="messages__item messages__item--operator">' + item.message + '</div>' // 修复类名拼写和标签闭合
        }
    });

    const chatmessage = chatbox.querySelector('.chatbox__messages');
    chatmessage.innerHTML = html;
}

验证修复 #

完成上述修改后，重新启动Flask服务：

• 点击聊天图标，窗口可正常展开/收起；
• 输入消息并发送，能正常调用后端/predict接口并渲染回复；
• 浏览器控制台无报错信息。

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