title: Triggering submit button with Enter keypress event and mouse click
body: <p>I am a total beginner and am learning front-end using a "just do it" and project-focus route.</p>
  
  <p><em>My web app will essentially work similar to that of a to-do list.</em></p>
  
  <p>I assume it is because I have "getElementById" twice for the same element.</p>
  
  <p><strong>This works initially:</strong></p>
  
  <pre><code>// add idea to list button
  
  document.getElementById('btnSubmit').addEventListener("submitIdea", submitIdea);
  
  function submitIdea() {
      var ul = document.getElementsByClassName('anIdea')[0];
      var enterIdea = document.getElementById('enterIdea');
      var li = document.createElement('li');
      li.setAttribute('class', enterIdea.value);            
      li.appendChild(document.createTextNode(enterIdea.value));
      ul.prepend(li);
      li.contentEditable = 'true';
  };
  </code></pre>
  
  <p><strong>But then, when I add this code, I am unable to write anything at all in my input box:</strong></p>
  
  <pre><code>// use enter key to submit new li item
  
  document.getElementById("enterIdea").addEventListener('keypress', function(event) {
      event.preventDefault();
      if (event.keyCode === 13) {
          document.getElementById('btnSubmit').click();
      }
  });
  </code></pre>
  
  <p>These are the resources I used:</p>
  
  <ul>
  <li><a href="https://memorynotfound.com/dynamically-addremove-items-list-javascript/" rel="nofollow noreferrer">https://memorynotfound.com/dynamically-addremove-items-list-javascript/</a></li>
  <li><a href="https://stackoverflow.com/questions/155188/trigger-a-button-click-with-javascript-on-the-enter-key-in-a-text-box">Trigger a button click with JavaScript on the Enter key in a text box</a></li>
  </ul>