CODEWITHSUNDEEP
javascripthtml
digitalstudiomdlabs mdlabs
digitalstudiomdlabs mdlabs

Reputation: 15

Get html element

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/[email protected]/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/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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);
});

Upvotes: 1

Views: 138

Answers (2)

Bani
Bani

Reputation: 562

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/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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.

Upvotes: 1

chaos505
chaos505

Reputation: 496

Your JS code is fine.

The issue is <script scr="js/main.js"></script>

You have a typo in scr="js/main.js" should be src="js/main.js

Upvotes: 1

Related Questions