Hello this is my first question , I am creating a chatbot using HTML, CSS and JS. After loading the page there are 4 options on which a user can click and based on selected option chatbot will give you another 4 options. For eg. If there is a Option "Frontend" (Out of 4 options) ,so if user selects this option he should get another options like "Html","CSS","JS","React js" after the latest message. I am getting those options but not after the latest message. There is some issue in Javascript. For more details I am adding code and output.
CODE
<!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:
Initial state after page loading
enter image description here
After Clicking "Help me find the right Instant On products for my business."
enter image description here
I want all the options (Option1..) should appear after "Sure! To find the right products, please provide more details about your business.", but not happening like shown in image.
2
Answers
Welcome to SO!
There is a Small issue in the displayOptions function where you’re trying to display the additional options :
Here’s the corrected code for the element:
You have mistaken in the classname 🙂
Make sure to update the class name in both your HTML and JavaScript code for consistency.
You have positioned
option-buttonsduring its definition above the place where you wanted if I understand your question. Here I create a template for it and append it tochat-box, so it works. But you will still need to apply some further fixes, because this approach changes HTML and therefore attached event handlers will be gone as HTML is being overriden. But don’t worry about it. Your next task will be to create a container where you would ideally like to place these new options and use that instead of the chat box. So this snippet proves that you can solve your issue and shows you how, but you will need to make further adjustments in order to integrate this into your project properly.