title: document.getElementById('id') is null javascript error
body: <p>For some reason I get an <code>document.getElementById('id') is null</code> JS error on line 7 with the following markup and script:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
  &lt;title&gt;Quadratic Root Finder&lt;/title&gt;
  &lt;script&gt;
  document.getElementById('calculate').onclick = function calculateQuad()
  {
      var inputa = document.getElementById('variablea').value;
      var inputb = document.getElementById('variableb').value;
      var inputc = document.getElementById('variablec').value;
  
      root = Math.pow(inputb,2) - 4 * inputa * inputc;
      root1 = (-inputb + Math.sqrt(root))/2*inputa
      root2 = (-inputb + Math.sqrt(root))/2*inputa 
  
      document.getElementById('root1').value = root1;
      document.getElementById('root2').value = root2;
      if(root&lt;'0')
      {
          alert('This equation has no real solution.')
      }
      else {
          if(root=='0')
          {
              document.getElementById('root1').value = root1
              document.getElementById('root2').value = 'No Second Answer'
          }
          else {
              document.getElementById('root1').value = root1
              document.getElementById('root2').value = root1
              }
          }
  };
  document.getElementById('erase').onlick = this.form.reset();
  &lt;/script&gt;
  &lt;style&gt;
  #container
  {
      text-align: center;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="container"&gt;
  &lt;h1&gt;Quadratic Root Finder!&lt;/h1&gt;
  &lt;form id="form1"&gt;
      a:&lt;input id="variablea" value="" type="text"&gt;
      &lt;br/&gt;
      b:&lt;input id="variableb" value="" type="text"&gt;
      &lt;br /&gt;
      c:&lt;input id="variablec" value="" type="text"&gt;
      &lt;br /&gt;
      &lt;input id="calculate" value="Calculate!" type="button"&gt;
      &lt;input id="erase" value="Clear" type="button"&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      Roots:
      &lt;br /&gt;
      &lt;input id="root1" type="text" readonly&gt;
      &lt;br /&gt;
      &lt;input id="root2" type="text" readonly&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What's the real problem here?</p>