title: TypeError: Cannot read property 'innerHTML' of null
body: <p>I am trying to retain the best time value under the id "bestTime", but I keep on getting the following error in Chrome: Cannot read property 'innerHTML' of null at showBestTime.</p>
  
  <p>Not sure what I am doing wrong, I have attached the code below. I am trying to process the best time in the function showBestTime. Thanks in advance!</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-html lang-html prettyprint-override"><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Reaction tester&lt;/title&gt;
          &lt;/head&gt;
          &lt;style type="text/css"&gt;
              #page-container{
                  width: 1000px;
                  margin: 0 auto;
                  height: 800px;
              }
              body{
                  margin: 0;
                  padding: 0;
                  font-family: Helvetica, Arial, freesans, sans-serif;
              }
              #shape{
                  width: 200px;
                  height: 200px;
                  background-color: red;
                  display: none;
                  position: relative;
              }
              .time{
                  font-weight: bold;
              }
          &lt;/style&gt;
      &lt;body&gt;
          &lt;div id="page-container"&gt;
              &lt;h1&gt;Test Your Reactions!&lt;/h1&gt;
              &lt;p&gt;Click on the boxes and circles as quickly as you can!&lt;/p&gt;
              &lt;p class="time"&gt;Your time: &lt;span id="timeTaken"&gt;&lt;/span&gt;&lt;/p&gt;
              &lt;p class="time"&gt;Best time: &lt;span id="bestTime"&gt;10&lt;/span&gt;s&lt;/p&gt;
              &lt;div id="shape"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;script type="text/javascript"&gt;
              var start=new Date().getTime();
              function getRandomColor() {
                  var letters= "0123456789ABCDEF";
                  var color= "#";
                  for (var i=0; i&lt;6; i++) {
                      color +=letters[Math.floor(Math.random()*16)];
                  }
                  return color;
              }
              function makeShapeAppear(){
                  var top=Math.random()*400;
                  var left=Math.random()*800;
                  var width=(Math.random()*400)+100;
                  if(Math.random()&gt;0.5){ document.getElementById("shape").style.borderRadius="50%";
                  } else{
                  document.getElementById("shape").style.borderRadius="0";
                  } document.getElementById("shape").style.backgroundColor=getRandomColor();
                  document.getElementById("shape").style.top=top+"px";
                  document.getElementById("shape").style.left=left+"px"; document.getElementById("shape").style.width=width+"px"; document.getElementById("shape").style.height=width+"px";
                  document.getElementById("shape").style.display="block";
                  start=new Date().getTime();
              }
              function appearAfterDelay(){
                  setTimeout(makeShapeAppear, (Math.random() * 2000));
              }
              function showBestTime(y){ if(y&lt;document.getElementById("besttime").innerHTML){
                      document.getElementById("besttime").innerHTML=y;
                  }
              }
              appearAfterDelay();
              document.getElementById("shape").onclick=function(){
                 document.getElementById("shape").style.display="none";
                 var end=new Date().getTime();
                 var timeTaken=(end-start)/1000; document.getElementById("timeTaken").innerHTML=timeTaken+"s";
                 appearAfterDelay();
                 showBestTime(timeTaken);
             }
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>