title: document.getElementById not working properly
body: <p>For some reason when I call document.getElementById("userGuess").value, the alert box shows nothing when it should show whatever is currently in the text box. I would appreciate any help. Here's my HTML and Javascript portions that are involved:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;section class="game"&gt; &lt;!-- Guessing Section --&gt;
  
              &lt;h2 id="feedback"&gt;Make your Guess!&lt;/h2&gt;
  
              &lt;form&gt;
                  &lt;input type="text" name="userGuess" id="userGuess" class="text" maxlength="3" autocomplete="off" placeholder="Enter your Guess" required/&gt;
                  &lt;input type="submit" id="guessButton" class="button" name="submit" value="Guess"/&gt;
              &lt;/form&gt;
  
              &lt;p&gt;Guess #&lt;span id="count"&gt;0&lt;/span&gt;!&lt;/p&gt;
  
              &lt;ul id="guessList" class="guessBox clearfix"&gt;
  
              &lt;/ul&gt;
  
          &lt;/section&gt;
  
  and Javascript:
  
  alert(document.getElementById("userGuess").value);
  </code></pre>