title: Javascript - Display remaining characters of text area
body: <p>So I have set the <code>maxlength</code> of my <code>textarea</code> to be 200 and I would like to display a nice countdown function that shows how many characters they have left as they are typing.</p>
  
  <p>My HTML is as follows:</p>
  
  <pre><code>&lt;tr&gt;
      &lt;th width="20%" scope="row" valign="top"&gt;Description&lt;div id="characters-left"&gt;&lt;/div&gt;&lt;/th&gt;
      &lt;td width="80%"&gt;&lt;textarea id="text-area" style="width: 48%" name="poll-description" value="" maxlength="200"&gt;&lt;/textarea&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>And the JS that I am trying to do it with is like this:</p>
  
  <pre><code>&lt;script&gt;
      window.onload = textareaLengthCheck();
  
      function textareaLengthCheck() {
      var textArea = document.getElementById('text-area').value.length;
      var charactersLeft = 200 - textArea;
      var count = document.getElementById('characters-left');
      count.innerHTML = "Characters left: " + charactersLeft;
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I would rather do this with vanilla javascript as opposed to jQuery if possible. Any ideas?</p>