title: HTML/JS How to input text and have it appear on screen
body: <p>So, all I'm trying to do is have an input box into which the user types text, and when it is submitted the text appears on screen. I think I am nearly there, but I'm having a problem: the text appears on screen for a split-second and then disappears. Below is the relevant HTML:</p>
  
  <pre><code>&lt;h1 id="outputtext"&gt;&lt;/h1&gt;
  &lt;div id="box"&gt;
      &lt;form onsubmit="f()"&gt;
          &lt;input type="text" id="input" placeholder="Enter text" autocapitalize="off" /&gt;
          &lt;input type="submit" id="submitbutton"&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the internal JavaScript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function f() {
      var t = document.getElementById("input").value;
      document.getElementById("outputtext").innerHTML = t;
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Like I said, the entered text appears for a split-second and then disappears. Any thoughts on how to fix this would be greatly appreciated. I'm sorry if this is a foolish question, but I am only a beginner, and this is my first experience with input boxes. I have searched this forum and other regions of the Web and cannot find any helpful content.</p>