如何在 localhost 中进行简单的聊天/存储消息？
[英]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.
我正在锻炼，一个简单的聊天/存储消息，在localhost上工作，但它不能正常工作。 The objective is to send user and message, and store the user and messages sent with a date.目标是发送用户和消息，并存储带有日期的用户和消息。 Like:(11:32 @USER: Hello world).喜欢：（11:32 @USER：世界你好）。
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?我会在上面贴一个feedle，有人可以帮我吗？
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 个解决方案
解决方案1
1 已采纳 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.为了防止这种情况，您必须接受在您的事件处理程序代码中添加 e.preventDefault() 。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.