How can I make a simple chat/store messages in localhost?

I’m working on exercise, a simple chat/store messages, working on localhost, but it’s not working properly. The objective is to send user and message, and store the user and messages sent with a date. Like:(11:32 @USER: Hello world).

This message data (with user,message and date) should be displayed on page, one after another.

I’m doing this with no dependencies, but I cannot seem to make that work. I will post a feedle on it, can someone help me with this?

let messages = document.getElementById("messages");
let textbox = document.getElementById("textbox");
let button = document.getElementById("button");
let username = document.getElementById("username");

button.addEventListener("keyup", function () {
    var newMessage = document.createElement("ul");
    newMessage.innerHTML = textbox.value;
    messages.appendChild(newMessage);
    textbox.value = "";
    let time = new Date();
  });

<!DOCTYPE HTML>
<html>
    <head>
      <title>Chat</title>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link rel="stylesheet" href="style.css">
        <title><b>chatbox</b></title>
        <form action="" method="get" class="web-form"></form>
        <link rel="icon" href="129663.png"/>
    </head>
    
    <body>

      </form>
        <h1 style="color:rgb(168, 203, 231);text-align:left;">chatbox</h1>
        <form class="flex-columns">
            <div>
              <ul id="messages"></ul>
                <label id="user" for="username"><b>Username:</b></label>
                <input name="username" type="text" name="name" id="name" required/>
                <label id="msg" for="msg"><b>Message:</b></label>
                <textarea placeholder="Type message.." name="msg" required></textarea>
                
            </div>
            <button type="submit" id="button">Send</button>
      </form>
        <script src="index.js"></script>
    </body>
</html>

Answer

Since the button type is submit , on click the form submits and performs its default behavior ( send a get request – effectively refreshing the page ) . To prevent this you will have to accept to add e.preventDefault() in your event handler code .

let messages = document.getElementById("messages");
let textbox = document.getElementById("textbox");
let button = document.getElementById("button");
let username = document.getElementById("username");

button.addEventListener("click", function (e) {
    e.preventDefault();
    var newMessage = document.createElement("ul");
    newMessage.innerHTML = textbox.value;
    messages.appendChild(newMessage);
    textbox.value = "";
    let time = new Date();
  });

<!DOCTYPE HTML>
<html>
    <head>
      <title>Chat</title>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link rel="stylesheet" href="style.css">
        <title><b>Web form</b></title>
        <form action="" method="get" class="web-form"></form>
        <link rel="icon" href="129663.png"/>
    </head>
    
    <body>

      
        <h1 style="color:rgb(168, 203, 231);text-align:left;">Web Form Chat</h1>
        <form class="flex-columns">
            <div>
              <ul id="messages"></ul>
                <label id="user" for="username"><b>Username:</b></label>
                <input name="username" type="text" name="name" id="name" required/>
                <label id="msg" for="msg"><b>Message:</b></label>
                <textarea id="textbox" placeholder="Type message.." name="msg" required></textarea>
                
            </div>
            <button type="submit" id="button">Send</button>
      </form>
      <div id="messages">
      
      </div>
        <script src="index.js"></script>
    </body>
</html>

Advertisement

Answer