title: Javascript keypress event and e.keycode
body: <ol>
  <li><p>I have a code which is suppose to update the number of <em>remaining characters left</em> when the user types in a <code>text input</code>. The code is triggered using <code>keypress</code> event. The problem is the code is <em>triggered</em> only after <em>2</em> <code>keypress</code>. Why does that happen?</p></li>
  <li><p>I have a code to show the key of <strong>ASCII</strong> code but the character always shows <strong>8</strong> and shows when I press <em>backspace</em>. And how to use <code>String.fromCharCode(event.keycode} ;</code> method.</p></li>
  <li><p>Why is a <code>event</code> parameter added to a <code>function</code> ?
  How does <code>e.keycode</code> know it is displaying the <code>keycode</code> of the <em>user's</em> input. </p></li>
  </ol>
  
  <p><strong>Code Sample</strong></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="page"&gt;
    &lt;h1&gt;List King&lt;/h1&gt;
    &lt;form id="messageForm"&gt;
      &lt;h2&gt;My profile&lt;/h2&gt;
      &lt;textarea id="message"&gt;&lt;/textarea&gt;
      &lt;div id="charactersLeft"&gt;180 characters&lt;/div&gt;
      &lt;div id="lastKey"&gt;&lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>var el;                                                    // Declare variables
  
  function charCount(e) {                                    // Declare function
    var textEntered, charDisplay, counter, lastkey;          // Declare variables
    textEntered = document.getElementById('message').value;  // User's text
    charDisplay = document.getElementById('charactersLeft'); // Counter element
    counter = (180 - (textEntered.length));                  // Num of chars left
    charDisplay.textContent = counter;                       // Show chars left
  
    lastkey = document.getElementById('lastKey');            // Get last key used
    lastkey.textContent = 'Last key in ASCII code: ' + e.keyCode; // Create msg 
  }
  
  el = document.getElementById('message');                   // Get msg element
  el.addEventListener('keypress', charCount, false);         // keypress -call charCount()
  </code></pre>