How can I make a simple chat/store messages in localhost?
Question
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>
1 answers
solution1
1 ACCPTED 2020-12-13 01:07:35
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.