title: Uncaught TypeError: Cannot set property 'onclick' of null
body: <p>I'm having problems making my window alert pop up with a simple checkbox and can't for the life of me figure out why. Here's the basic Javascript and HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var blue_box=document.getElementById("color-blue");
  function colorFunction() {
      window.alert("This color is blue!");
  }
  
  blue_box.onclick=colorFunction;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form action="" method="POST" id="form"&gt;
      &lt;fieldset&gt;
          &lt;legend&gt; Form!&lt;/legend&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;label&gt;&lt;input type="checkbox" 
                      name="color" 
                      value="blue" 
                      id="color-blue" /&gt;
                      blue&lt;/label&gt;
                  &lt;/li&gt;
           &lt;li&gt;&lt;label&gt;&lt;input type="checkbox" 
                      name="color"  
                      value="red" 
                      id="color-red" /&gt;
                      red&lt;/label&gt;
                  &lt;/li&gt;
    &lt;li&gt;&lt;label&gt;&lt;input type="checkbox" 
                      name="color" 
                      value="yellow" 
                      id="color-yellow" /&gt;
                      yellow &lt;/label&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/fieldset&gt;
      &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Which throws: <code>Uncaught TypeError: Cannot set property 'onclick' of null</code> 
  under  </p>
  
  <pre><code>blue_box.onclick=colorFunction;
  </code></pre>
  
  <p>Are there any visible reasons for this error in my code?</p>