你好，这是我的第一个问题，我正在使用HTML，CSS和JS创建聊天机器人。加载页面后，有4个选项，用户可以点击并根据选定的选项聊天机器人会给你给予另外4个选项。例如.如果有一个选项“前端”（出4个选项），所以如果用户选择这个选项，他应该得到另一个选项，如“HTML”，“CSS”，“JS”，“React js”后的最新消息.我得到这些选项，但不是在最新的消息。JavaScript中有一些问题。更多的细节，我添加代码和输出。代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chatbot</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 100px;
}
.chat-container {
max-width: 80%;
margin: 0 auto;
border: 1px solid #ccc;
border-radius: 10px;
overflow: hidden;
max-height: 00%;
}
.chat-header {
background-color: #007bff;
color: #fff;
padding: 10px;
text-align: center;
}
.chat-box {
height: 300px;
overflow-y: scroll;
padding: 10px;
}
.message {
margin: 5px;
padding: 10px;
border-radius: 5px;
}
.message.user {
background-color: #f9f9f9;
text-align: right;
}
.message.bot {
background-color: #007bff;
color: #fff;
text-align: left;
align-items: flex-end;
}
.user-input {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #f9f9f9;
}
input[type="text"] {
flex: 1;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
margin-right: 10px;
}
button {
background-color: white;
color: black;
border-color: #007bff;
padding: 8px 16px;
border-radius: 5px;
cursor: pointer;
text-align: left;
font-size: 16px;
margin-left:500px;
border-width:1px;
}
button:hover {
background-color: #007bff;
color: #fff
}
/* New style for option buttons */
.option-button {
background-color: white;
color: black;
border-color: #007bff;
padding: 8px 16px;
border-radius: 5px;
margin-top: 5px;
cursor: pointer;
width: 50%;
}
.red{
color: #33BEFF
padding-right: 300px
}
</style>
</head>
<body>
<div class="chat-container">
<div class="chat-header">
<h1>Chatbot</h1>
</div>
<div class="chat-box" id="chat-box">
<!-- Initial welcome message from the chatbot -->
<div class="message bot">
<div>Hi, I am the chatbot. How can I assist you today?</div>
<!-- Option buttons -->
</div>
<div class="red">
<button class="option-button" data-option="Help me find the right Instant On products for my business.">Help me find the right Instant On products for my business.</button>
<button class="option-button" data-option="Why choose Instant On.">Why choose Instant On.</button>
<button class="option-button" data-option="I need a Wi-Fi network solution.">I need a Wi-Fi network solution.</button>
<button class="option-button" data-option="I'd like to receive the latest Instant On news.">I'd like to receive the latest Instant On news.</button>
</div>
<div class="option1-buttons" style="display: none;">
<button class="option1-button" data-option="Option1">Option1</button>
<button class="option1-button" data-option="Option2">Option2</button>
<button class="option1-button" data-option="Option3">Option3</button>
<button class="option1-button" data-option="Option4">Option4</button>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const chatBox = document.getElementById('chat-box');
const optionButtons = document.querySelectorAll('.option-button');
const option1Buttons = document.querySelectorAll('.option1-button');
// Attach click event listeners to option buttons
optionButtons.forEach(button => {
button.addEventListener('click', function () {
const selectedOption = button.getAttribute('data-option');
displayMessage(selectedOption, 'user');
simulateChatbotResponse(selectedOption);
});
});
// Attach click event listeners to option1 buttons
option1Buttons.forEach(button => {
button.addEventListener('click', function () {
const selectedOption = button.getAttribute('data-option');
displayMessage(selectedOption, 'user');
simulateChatbotResponse(selectedOption);
});
});
function displayMessage(message, sender) {
const messageDiv = document.createElement('div');
messageDiv.className = `message ${sender}`;
messageDiv.textContent = message;
chatBox.appendChild(messageDiv);
chatBox.scrollTop = chatBox.scrollHeight;
}
function simulateChatbotResponse(selectedOption) {
// Simulate the chatbot's response based on the selected option
setTimeout(function () {
let botResponse = '';
if (selectedOption === "Help me find the right Instant On products for my business.") {
botResponse = "Sure! To find the right products, please provide more details about your business.";
displayMessage(botResponse, 'bot');
displayOptions();
} else {
// Provide responses based on the selected option
switch (selectedOption) {
case "Why choose Instant On.":
botResponse = "Instant On offers reliable and fast Wi-Fi solutions for businesses of all sizes. We prioritize simplicity and performance.";
displayMessage(botResponse, 'bot');
break;
case "I need a Wi-Fi network solution.":
botResponse = "Great! We can help you with that. Please tell me more about your requirements.";
displayMessage(botResponse, 'bot');
break;
case "I'd like to receive the latest Instant On news.":
botResponse = "Certainly! To receive the latest news and updates, please subscribe to our newsletter on our website.";
displayMessage(botResponse, 'bot');
break;
case "Option1":
botResponse = "You selected Option1.";
displayMessage(botResponse, 'bot');
break;
case "Option2":
botResponse = "You selected Option2.";
displayMessage(botResponse, 'bot');
break;
case "Option3":
botResponse = "You selected Option3.";
displayMessage(botResponse, 'bot');
break;
case "Option4":
botResponse = "You selected Option4.";
displayMessage(botResponse, 'bot');
break;
default:
botResponse = "I'm sorry, I couldn't process your request at the moment.";
displayMessage(botResponse, 'bot');
}
}
}, 1000);
}
function displayOptions() {
// Show the hidden option buttons after the specified message
const option1ButtonsDiv = document.querySelector('.option1-buttons');
option1ButtonsDiv.style.display = 'block';
}
});
</script>
</body>
</html>**OUTPUT：**页面加载后的初始状态enter image description here点击“帮我找到适合我业务的Instant On产品”后enter image description here
我想所有的选项（选项1..）应该出现在“当然！要找到合适的产品，请提供有关您的业务的更多详细信息。"，但不会发生像图像中所示。
2条答案
按热度按时间ua4mk5z41#
欢迎来到SO！
在显示选项函数中有一个小问题，你试图显示额外的选项：
下面是元素的正确代码：
你弄错了classname：）
确保更新HTML和JavaScript代码中的类名以保持一致性。
idv4meu82#
如果我理解你的问题，你在定义
option-buttons的时候把它放在了你想要的位置之上。这里我为它创建了一个模板，并将其附加到chat-box，这样它就可以工作了。但是您仍然需要应用一些进一步的修复，因为这种方法会更改HTML，因此当HTML被覆盖时，附加的事件处理程序将消失。但别担心。您的下一个任务将是创建一个容器，您希望在其中放置这些新选项，并使用该容器而不是聊天框。因此，此代码片段证明您可以解决问题并向您展示如何解决，但您需要进行进一步的调整，以便将其正确集成到您的项目中。