title: Cannot set property 'onclick' of null
body: <p>I am randomly selecting an id using an and using it to manipulate the CSS.
  But I am getting an error as </p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot set property 'onclick' of null<br>
    (anonymous function) @ ReactionTester.html:101</p>
  </blockquote>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Reaction Tester&lt;/title&gt;
  
  &lt;style type="text/css"&gt;
  
      #box {
          height: 200px;
          width: 200px;
          border-radius: 10px;
          display: none;
      }
  
      #circle {
          height: 200px;
          width: 200px;
          border-radius: 100px;
          display: none;
      }
  
      #score {
          display: none;
      }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
  &lt;p id="score"&gt;Your reaction time was &lt;span id="reaction"&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;div id="box"&gt;&lt;/div&gt;
  &lt;div id="circle"&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  
             var shapes = ["box", "circle"];
             var shape = Math.random();
             shape = 2 * shape;
             shape = Math.floor(shape);
             var finalShape = (shapes[shape]);
             console.log(finalShape);
  
             var createdTime;
             var clickedTime;
             var reactionTime;
  
  
  
             function getColor() {
  
                 var colors = ["#0E7AC4", "#f1c40f", "#9b59b6", "#e74c3c", "#f39c12", "#c0392b", "#2c3e50", "#59ABE3",
                         "#6BB9F0", "#26A65B", "#65C6BB", "#86E2D5", "#4DAF7C", "#F5D76E", "#FDE3A7", "#F9BF3B",
                         "#FDE3A7", "#F4D03F", "#EB9532", "#F2784B", "#F5AB35", "#F9BF3B", "#ABB7B7"
                 ];
  
                 var color = Math.random();
  
                 color = colors.length * color;
  
                 color = Math.floor(color);
  
                 console.log(color);
  
                 return colors[color];
  
             }
  
  
  
             function makeBox() {
  
  
                 createdTime = Date.now();
  
                 var color = getColor();
  
                 console.log(color);
  
                 document.getElementById('finalShape').style.backgroundColor = color;
  
                 var time = Math.random();
  
                 time = 5000 * time;
  
                 time = Math.ceil(time);
  
                 console.log("Coming in : " + time);
  
                 setTimeout(function() {
  
                     document.getElementById('finalShape').style.display = "block";
  
                 }, time);
  
             }
  
    ***Error shows up here*** document.getElementById('finalShape').onclick = function() {
  
                 this.style.display = "none";
                 clickedTime = Date.now();
  
                 reactionTime = clickedTime - createdTime;
  
                 document.getElementById('score').style.display = "block";
                 document.getElementById('reaction').innerHTML = (reactionTime / 1000) + " seconds";
  
                 makeBox();
  
             }
  
             makeBox();
  
      &lt;/script&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>What am I doing wrong ?</p>