JS报错Uncaught ReferenceError: selectors未定义，聊天框无法打开求助

问题描述 #

我跟着教程制作基础聊天机器人，技术栈为JS、Python 3.11.4、HTML、Flask和CSS。大部分代码无误，但运行时出现错误，导致聊天弹窗无法打开。

错误信息 #

Uncaught ReferenceError: selectors is not defined

相关代码片段 #

JavaScript代码 #

class Chatbox {
  constructor() {
    this.args = {
      openButton: document.querySelector(selectors, ".chatbox__button"),
      chatBox: document.querySelector(selectors, ".chatbox__support"),
      sendButton: document.querySelector(selectors, ".send__button"),
    };
    this.state = false;
    this.messages = [];
  }

// 剩余函数代码...

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

<head>
    <meta charset="UTF-8">
    <title>Chatbot</title>
</head>
<body>
<div class="container">
    <div class="chatbox">
        <div class="chatbox__support">
            <div class="chatbox__header">
                <div class="chatbox__image--header">
                    <img src="https://img.icons8.com/color/48/000000/circled-user-female-skin-type-5--v1.png" alt="image">
                </div>
                <div class="chatbox__content--header">
                    <h4 class="chatbox__heading--header">Chat support</h4>
                    <p class="chatbox__description--header">Hi. My name is Sam. How can I help you?</p>
                </div>
            </div>
            <div class="chatbox__messages">
                <div></div>
            </div>
            <div class="chatbox__footer">
                <input type="text" placeholder="Write a message...">
                <button class="chatbox__send--footer send__button">Send</button>
            </div>
        </div>
        <div class="chatbox__button">
            <button><img src="{{ url_for('static', filename='images/chatbox-icon.svg') }}" /></button>
        </div>
    </div>
</div>

    <script>
        $SCRIPT_ROOT = {{ request.script_root|tojson }};
    </script>
    <script type="text/javascript" src="{{ url_for('static', filename='app.js') }}"></script>

</body>
</html>

解决方案 #

错误根源在于document.querySelector的调用方式错误：你额外传递了一个未定义的selectors参数，而该方法仅需传入一个CSS选择器字符串。

修正后的JavaScript代码：

class Chatbox {
  constructor() {
    this.args = {
      openButton: document.querySelector(".chatbox__button"),
      chatBox: document.querySelector(".chatbox__support"),
      sendButton: document.querySelector(".send__button"),
    };
    this.state = false;
    this.messages = [];
  }

// 剩余函数代码...

删除所有document.querySelector调用中的selectors参数后，即可解决这个引用错误，聊天弹窗应该能正常打开。

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