title: Why does getting input boxes' .value not work after it's been submitted?
body: <p>I have an input box that I'm getting the value of with .value, and it will get the value the first time, but after the input box has been submitted once, getting it's .value doesn't work anymore. Is there a way to fix this or an alternative way to get the value of the input box, or am I just doing something wrong?</p>
  
  <p>To recreate the error, just run the snippet below and input something twice.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var chatinput = document.getElementById("chatinput");
  var body = document.getElementById("body");
  var username;
  var inp = null;
  var message = "";
  
  username = prompt("Enter a username:", "Username");
  if (username !== null) {
      inp = username.toLowerCase();
  }
  
  while (inp === null || inp === "" || inp == "username" || inp.includes("fuck") || inp.includes("ass") || inp.includes("shit") || inp.includes("*")) {
      username = prompt("That's not an appropriate username...", "Username");
      if (username !== null) {
          inp = username.toLowerCase();
      }
  }
  
  function sendchat() {
      message = "[" + username + "]: " + chatinput.value;
      body.innerHTML += "&lt;p class=\"chatbox\"&gt;" + message + "&lt;/p&gt;";
      chatinput.value = "";
  }
  
  addEventListener("keyup", function(event) {
      if (event.keyCode == 13) {
          sendchat();
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
      transition-duration: 0.5s;
      scroll-behavior: smooth;
  }
  
  body {
      background-color: black;
  }
  
  div {
      width: 100%;
      text-align: justify;
  }
  
  h1 {
      font: 8vw courier;
      color: white;
  }
  
  h2 {
      font: 7vw courier;
      color: white;
  }
  
  h3 {
      font: 6vw courier;
      color: white;
  }
  
  h4 {
      font: 5vw courier;
      color: white;
  }
  
  h5 {
      font: 4vw courier;
      color: white;
  }
  
  h6 {
      font: 3vw courier;
      color: white;
  }
  
  p {
      font: 2vw courier;
      color: white;
  }
  
  button, input, a {
      text-decoration: none;
      font: 2vw courier;
      color: cyan;
      border: 0.2vw solid cyan;
      border-radius: 1vw;
      background-color: darkblue;
  }
  
  a:hover, input:hover, button:hover {
      background-color: blue;
      box-shadow: 0px 0px 2.5vw white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width"&gt;
          &lt;title&gt;Stuff&lt;/title&gt;
          &lt;link href="/logo.png" rel="icon"&gt;
          &lt;link href="/style.css" rel="stylesheet"&gt;
      &lt;/head&gt;
  
      &lt;body id="body"&gt;
          &lt;p&gt;Message: &lt;input id="chatinput"&gt;&lt;/p&gt;
          &lt;script src="script.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>