我如何才能让聊天在用户发送消息时自动更新？

Question

我正在尝试聊天，但功能正常。正如您在这里看到的，我有一些代码应该从机器人输出一些文本，然后您可以在文本框中键入内容，然后按“发送”按钮发送文本，它应该会自动显示在聊天中。不知道为什么没有出现！

请帮忙谢谢:)

Javascript:

let chatMsg = ["Hello! Welcome to this game. Please press 'i' for instructions!"];

let Game = {
  currentGame:{
    variables:{
      sendMessage:function(messageContent) {
        chatMsg.push(messageContent)
      }
    }
  }
}

let username = "CommunityBot";


for (let i = 0; i < chatMsg.length; i++) {
  
  let chatElem = document.createElement("p");

  chatElem.innerHTML = "<strong>"+username+": </strong>"+chatMsg[i];
  
  document.querySelector(".chat").appendChild(chatElem);
}

HTML:

<div class="chat">
          <h1>
            CHAT

          </h1>

        </div>
        <div>
          <input class="enterT" type="text" placeholder="Enter A Message..!"><button onclick="Game.currentGame.variables.sendMessage(document.querySelector('.enterT').innerHTML)">send message</button>
        </div>

凯文

Answer 1

您的代码有 2 个小问题。

首先，您的输入值应该由 .value 而不是 .innerHTML

访问

document.querySelector('.enterT').innerHTML

到

document.querySelector('.enterT').value

其次，您只调用了chatMsg.push(messageContent)，但在更新输入值后没有更新document。

let chatMsg = ["Hello! Welcome to this game. Please press 'i' for instructions!"];

//the function to support adding message to the document
function appendChatMessage(currentUserName, chatMessage) {
  let chatElem = document.createElement("p");
  chatElem.innerHTML = "<strong>" + currentUserName + ": </strong>" + chatMessage;
  document.querySelector(".chat").appendChild(chatElem);
}

let username = "CommunityBot";
for (let i = 0; i < chatMsg.length; i++) {
  appendChatMessage(username, chatMsg[i])
}

let Game = {
  currentGame: {
    variables: {
      sendMessage: function(messageContent) {
        chatMsg.push(messageContent);
        //update your message in the document
        appendChatMessage(username, messageContent);
      }
    }
  }
}

<div class="chat">
  <h1>
    CHAT
  </h1>
</div>
<div>
  <input class="enterT" type="text" placeholder="Enter A Message..!"><button onclick="Game.currentGame.variables.sendMessage(document.querySelector('.enterT').value)">send message</button>
</div>

我如何才能让聊天在用户发送消息时自动更新？

How do i make it so that the chat autmatically updates when the user send a message?

javascript

chat