我如何在本地主机中制作简单的 chat/store 消息？

Question

我正在练习，一条简单的 chat/store 消息，正在 localhost 上工作，但它无法正常工作. objective是发送用户和消息，存储发送的用户和消息，带日期。 赞：(11:32 @USER: Hello world).

此消息数据（包含用户、消息和日期）应该一个接一个地显示在页面上。

我在没有依赖项的情况下执行此操作，但我似乎无法做到这一点。我将 post 提供一个反馈，有人可以帮助我吗？

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>

我如何在本地主机中制作简单的 chat/store 消息？

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

javascript

dom

chat

node.js

dom-events