Search code examples
javascripthtmlcsspython-3.xreferenceerror

Uncaught ReferenceError: selectors is not defined

I am doing a Youtube Tutorial on making a basic chatbot I am using JS, Python 3.11.4, HTML, Flask, and CSS. Most of the code is correct but every time I run it I get a error and cannot open the chat bubble thing.

Heres the error:

Uncaught ReferenceError: selectors is not defined

here is the relevant part of the JS code:

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 = [];
  }

// Rest of functions and so on

Here is the HTML because it might be giving errors:

<!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>
Solution

  • Just use document.querySelector(".chatbox__button") the first argument requires the selector, you are just passing a variable which is undefined that's why it didn't worked