如何在 localhost 中進行簡單的聊天/存儲消息？

Question

我正在鍛煉，一個簡單的聊天/存儲消息，在localhost上工作，但它不能正常工作。 目標是發送用戶和消息，並存儲帶有日期的用戶和消息。 喜歡：（11:32 @USER：世界你好）。

此消息數據（包括用戶、消息和日期）應一個接一個地顯示在頁面上。

我這樣做沒有依賴關系，但我似乎無法做到這一點。 我會在上面貼一個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>

Answer 1

由於按鈕類型是提交，點擊表單提交並執行其默認行為（發送獲取請求 - 有效地刷新頁面）。 為了防止這種情況，您必須接受在您的事件處理程序代碼中添加 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>

如何在 localhost 中進行簡單的聊天/存儲消息？

問題描述

1 個解決方案

解決方案1
1 已采納 2020-12-13 01:07:35

如何在 localhost 中進行簡單的聊天/存儲消息？

問題描述

1 個解決方案

解決方案1 1 已采納 2020-12-13 01:07:35

解決方案1
1 已采納 2020-12-13 01:07:35