title: addEventListener click is immediately disappearing after KeyPress
body: <p>For some reason I can not get it to work, after clicking enter on the keyboard the new input shows up for less than a millisecond and then disappears</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Simple Register Form with JavaScript&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;form&gt;
              &lt;input type="text" class="regFname" placeholder="First name: "&gt;
              &lt;button&gt;Register&lt;/button&gt;
          &lt;/form&gt;
          &lt;p&gt;Current Users&lt;/p&gt;
          &lt;ul&gt;&lt;/ul&gt;
      &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt; 
  </code></pre>
  
  <p>and here is the JavaScript</p>
  
  <pre><code>var inputFname = document.querySelector(".regFname");
  var button = document.querySelector("button");
  var ul = document.querySelector("ul");
  
  function inputLength() {
      return inputFname.value.length;
  }
  function add() {
      var li = document.createElement("li");
      li.appendChild(document.createTextNode(inputFname.value));
      ul.appendChild(li);
      inputFname.value = "";
  }   
  function addUserAfterClick() {
      if (inputLength() &gt; 0) {
          add();
      }
  }
  function addUserAfterKeyPress(event) {
      if (inputLength() &gt; 0 &amp;&amp; event.keyCode === 13) {
          add();
      }
  }
  button.addEventListener("click", addUserAfterClick);
  inputFname.addEventListener("keypress", addUserAfterKeyPress);
  </code></pre>