title: Trouble getting real time word count from html textbox
body: <p>I am very new to html and javascript. I have a textbox and am trying to count the number of words, then displaying the count in real time. I do not understand what I am doing wrong in this, or how to correct it. textContent does not make much sense to me.</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;style&gt;
        input[type='text'] {width:50px;}
        textarea {width:500px;height:300px;}
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;div&gt;
      &lt;h2&gt;Test&lt;/h2&gt;
      &lt;p&gt;The number of words is &lt;span id="wordCount"&gt;&lt;/span&gt;&lt;/p&gt;
      &lt;textarea id="toCount"&gt;&lt;/textarea&gt;
    &lt;/div&gt;
        &lt;script&gt;
  
      document.getElementById('toCount').addEventListener('input', function () {
          var text = this.textContent,
  
          count = text.trim().replace(/\s+/g, ' ').split(' ').length;
  
          document.querySelector('.wordCount').textContent = count;
  
      });
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The error that I get right now says 
  <code>Uncaught TypeError: Cannot set property 'textContent' of null</code></p>