title: Unable to print value of input field on keypress event
body: <p>I am new to javascript and  have written a simple program where on mouse click and enter key press the value of input field will be printed in an ordered list. I am able to print the value using button click event, but not able to print it using keypress(enter key). </p>
  
  <p>This is the error I am getting:</p>
  
  <blockquote>
    <p>[Violation] 'keypress' handler took 886ms</p>
  </blockquote>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>let button=document.getElementById("enter");
  let input=document.getElementById("ip");
  let ol=document.getElementById("oList")
  
  //variable button binds addEventListener method to a click event
  //listening to click event and performning action onclick
  button.addEventListener("click",function() {
      //if input's length is greater than 0 then create li, append the input to li and then append li with orderd list else will print nothing to add
      if(input.value.length&gt;0) {
      //created a list tag to add results after user submits
          console.log(input.value);
          let li=document.createElement("li");
          //will append the newly create li with same text "testing"
          //createTextNode creates text
          li.appendChild(document.createTextNode(input.value));
          //the text will be added to the ordered list 
          ol.appendChild(li);
          //reason for input.value=""; is that it will reset the input field after submitting the value
          //if this is not given then input field won't be resetted everytime on input submit
          input.value="";
      }
      else {
          alert("nothing to add")
      }  
  })
  
  input.addEventListener("keypress", function(event) {
      if(input.value.length&gt;0 &amp;&amp; event.keycode==13) {
          let li=document.createElement("li");
  
          li.appendChild(document.createTextNode(input.value));
  
          ol.appendChild(li);
  
          input.value="";
      }
      else {
          alert("nothing to enter");
      }
  
  })
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;
      &lt;title&gt;Shopping list&lt;/title&gt;
  
      &lt;!-- Bootstrap --&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
  
      &lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;
      &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
      &lt;!--[if lt IE 9]&gt;
        &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class="list" id="1"&gt;
              &lt;h1 id="2" &gt;Shopping List&lt;/h1&gt;
              &lt;h2 id="3"&gt;Items:&lt;/h2&gt;
              &lt;input type="text" id="ip"&gt;
              &lt;button type="button" class="btn btn-primary" id="enter"&gt;Add&lt;/button&gt;
              &lt;ol id="oList"&gt;
                &lt;li&gt;a&lt;/li&gt;
              &lt;/ol&gt;
  
  
        &lt;/div&gt;
  
  
      &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
      &lt;script src="shoppingList.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>