document.createElement показывает то, что я хочу. Затем он исчезает

Question

У меня небольшая проблема с моим кодом. Я хочу, чтобы ввод пользователя отображался на экране, как чат-бот. Однако этого не происходит. Вместо этого он отображает то, что я хочу. Потом он исчезает. Просто сообщение, а не все, но это тоже иногда случается. Что случилось и как это исправить?

function executeNewMessage() {
  var messagecontainer = document.getElementById("message");
  var message = messagecontainer.value;
  var newmessagediv = document.createElement("DIV");
  newmessagediv.innerHTML = message;
  document.getElementById("bodymessages").appendChild(newmessagediv);
}

<div id="site">
  <div id="head">
    Chatbot
  </div>
  <div id="body">
    <div id="bodymessages"></div>
    <span id="bottom"></span>
  </div>
  <div id="foot">
    <form>
      <label for="message">Type your message here</label>
      <input id="message" type="text" />
      <a href="#bottom">
        <button id="submit" onclick="executeNewMessage()">&rarr;</button>
      </a>
    </form>
  </div>
</div>

Answer 1

Причина, по которой это происходит, в том, что вы используете форму HTML. По умолчанию форма пытается отправить ее на сервер. Вот почему вы видите изменение только на короткое время, и страница снова перезагружается. Следовательно, вам необходимо использовать метод preventDefault ().

Итак, ваша функция должна выглядеть так:

function executeNewMessage(e) { //Here e is the event object
  var messagecontainer = document.getElementById("message");
  var message = messagecontainer.value;
  var newmessagediv = document.createElement("DIV");
  newmessagediv.innerHTML = message;
  document.getElementById("bodymessages").appendChild(newmessagediv);
  e.preventDefault();

}

Итак, preventDefault () делает то, что предотвращает действие по умолчанию события.

https://www.w3schools.com/jsref/event_preventdefault.asp