title: issue with using innerHTML() and inserting javascript variable values into HTML
body: <p>I am working on a small word counter for a school assessment and can't see what is wrong with this code. The idea is when you hit the submit button, it displays "Word Count: " and the amount of character put into a text box. I have showed the teacher my code and he agrees that he doesn't see a problem with it.</p>
  
  <p>Javascript:</p>
  
  <pre><code>window.onload = function(){
      var input = document.getElementById(userInput).value;
    if(submit.onclick) {
      document.getElementById("wordCount").innerHTML = "Word Count: " + input.length;
    };
  };
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script type='text/javascript' src='script.js'&gt;&lt;/script&gt;
      &lt;/head&gt;
        &lt;body&gt;
          &lt;h1 style='font-family:verdana;text-decoration:underline;'&gt;Word Counter&lt;/h1&gt;
          &lt;p&gt;Please input text into the text box below:&lt;/p&gt;
          &lt;input type='text' id='userInput'/&gt;
          &lt;button id='submit'&gt;Submit&lt;/button&gt;
          &lt;p id='wordCount'&gt;&lt;/p&gt;
          &lt;script type='text/javascript' src='script.js'&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>