I try to accomplish to make a chatbot but sounds like I have a problem on my code but no errors come up. I tried to debug the code but no errors come. I tried to get the message on the chat container, but in the main.js -when I try to access the input type text value. When I try let messageText = textbox.value; the .value does not exist. I can’t see any error. Apparently this is my index.html file.
Also I have try to change to var textbox = document.getElementById('mytextbox').value; when clicked nothing happens and the text inside of the input is not created in chat container.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="ChatBot">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Helder Ventura">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ChatBot</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1 class="text-center">Awesome Chatbot App</h1>
<div class="media">
<img class="rounded-circle float-left img-thumbnail" width="75px" src="https://i.imgur.com/8BlgN6L.png" alt="Generic placeholder image">
<div class="media-body">
<h5 style="margin:10px">ChatBot</h5>
<span style="margin-left: 10px;">Online</span>
</div>
</div>
<!--Messages Container-->
<div id="chatContainer" class="container border overflow-auto" style="height:500px">
<!--Chatbot message design-->
<div class="w-50 float-start shadow-sm" style="margin: 10px; padding: 5px;">
<span>Chat: </span>
<span style="margin-top: 10px; padding: 10px;">How are You?</span">
</div>
<!--User message design-->
<div class="w-50 float-end shadow-sm" style="margin: 10px; padding: 5px;">
<span>You: </span>
<span style="margin-top: 10px; padding: 10px;">Great</span">
</div>
</div>
<div class="input-group">
<input id="mytextbox" type="text" class="form-control"/>
<div class="input-group-append">
<button id="sendBtn" type="button" class="btn btn-primary">Send</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
<script scr="js/main.js"></script>
</body>
</html>
and this is my main.js file
//elements
var sendBtn = document.getElementById('sendBtn');
var textbox = document.getElementById('mytextbox');
var chatContainer = document.getElementById('chatContainer');
function sendMessage(messageText){
var messageElement = document.createElement('div');
messageElement.classList.add('w-50');
messageElement.classList.add('float-end');
messageElement.classList.add('shadow-sm');
messageElement.style.margin ="10px";
messageElement.style.padding ="5px";
messageElement.innerHTML = "<span>You: </span>"+
"<span style='margin-top:10px; padding:10px'>"+ messageText +"</span>";
chatContainer.appendChild(messageElement);
}
sendBtn.addEventListener('click', function(e){
let messageText = textbox.value;
console.log(e);
sendMessage(messageText);
});
>Solution :
var sendBtn = document.getElementById('sendBtn');
var textbox = document.getElementById('mytextbox');
var chatContainer = document.getElementById('chatContainer');
function sendMessage(messageText){
var messageElement = document.createElement('div');
messageElement.classList.add('w-50');
messageElement.classList.add('float-end');
messageElement.classList.add('shadow-sm');
messageElement.style.margin ="10px";
messageElement.style.padding ="5px";
messageElement.innerHTML = "<span>You: </span>"+
"<span style='margin-top:10px; padding:10px'>"+ messageText +"</span>";
chatContainer.appendChild(messageElement);
}
sendBtn.addEventListener('click', function(e){
let messageText = textbox.value;
textbox.value = "";
sendMessage(messageText);
});<body>
<div class="container">
<h1 class="text-center">Awesome Chatbot App</h1>
<div class="media">
<img class="rounded-circle float-left img-thumbnail" width="75px" src="https://i.imgur.com/8BlgN6L.png" alt="Generic placeholder image">
<div class="media-body">
<h5 style="margin:10px">ChatBot</h5>
<span style="margin-left: 10px;">Online</span>
</div>
</div>
<!--Messages Container-->
<div id="chatContainer" class="container border overflow-auto">
<!--Chatbot message design-->
<div class="w-50 float-start shadow-sm" style="margin: 10px; padding: 5px;">
<span>Chat: </span>
<span style="margin-top: 10px; padding: 10px;">How are You?</span>
</div>
<!--User message design-->
<div class="w-50 float-end shadow-sm" style="margin: 10px; padding: 5px;">
<span>You: </span>
<span style="margin-top: 10px; padding: 10px;">Great</span>
</div>
</div>
<div class="input-group">
<input id="mytextbox" type="text" class="form-control"/>
<div class="input-group-append">
<button id="sendBtn" type="button" class="btn btn-primary">Send</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>You got some typos in your HTML file, remove the " from spans closing tag in <span style="margin-top: 10px; padding: 10px;">How are You?</span">
and
<span style="margin-top: 10px; padding: 10px;">Great</span">
After that the messages appear and it seems to work.
EDIT:
I missed the miss spell on the script tag where you miss spelled src with scr thanks for pointing it out.