英文:
Uncaught ReferenceError: selectors is not defined
问题
我正在制作一个关于创建基本聊天机器人的YouTube教程，我正在使用JS、Python 3.11.4、HTML、Flask和CSS。大部分代码都是正确的，但每次运行时都会出现错误，无法打开聊天气泡。
这是错误信息：
Uncaught ReferenceError: selectors is not defined
以下是JS代码的相关部分：
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>
英文:
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>
答案1
得分: 1
"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 work."
英文:
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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论