title: Uncaught TypeError: Cannot read property 'lastChild' of null
body: <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;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;Face Matching Game&lt;/title&gt;
   &lt;h2&gt;Matching Game&lt;/h2&gt;
   &lt;p&gt;Click on the EXTRA face on the left side&lt;/p&gt;
   &lt;style type="text/css"&gt;
    div { position: absolute; width: 640px; height: 550px; background-color: maroon }
    img { position: absolute; width: 100px; height: 100px}
    #rightSide { left: 650px; border-left: 2px solid black; }
   &lt;/style&gt;
   &lt;script type="text/javascript"&gt;
    var NUM_OF_FACES = 0;
    var THE_LEFT_SIDE, THE_RIGHT_SIDE;
    //Function to generate faces
    function generateFaces() {
     THE_LEFT_SIDE = document.getElementById("leftSide");
     THE_RIGHT_SIDE = document.getElementById("rightSide");
     NUM_OF_FACES += 5;
     var image;
     while(NUM_OF_FACES&gt;0){
      image = document.createElement("img");
      image.src = "smile.png";
      image.style.top = Math.floor(Math.random()* (THE_LEFT_SIDE.offsetHeight - 100)) + "px";
      image.style.left = Math.floor(Math.random()* (THE_LEFT_SIDE.offsetWidth - 100)) + "px";
      THE_LEFT_SIDE.appendChild(image);
      NUM_OF_FACES -= 1;
      //console.log(image.style.top, image.style.left )
     }
     var leftSideImages = THE_LEFT_SIDE.cloneNode(true);
     leftSideImages.removeChild(leftSideImages.lastChild);
     THE_RIGHT_SIDE.appendChild(leftSideImages);
    }//end generatefaces()
  
    function deleteFaces(argument) {
     while(THE_LEFT_SIDE.firstChild){
      THE_LEFT_SIDE.removeChild(THE_LEFT_SIDE.firstChild);
     }
     while(THE_RIGHT_SIDE.firstChild){
      THE_RIGHT_SIDE.removeChild(THE_RIGHT_SIDE.firstChild);
     }
    }//end deleteFaces()
  
    var theBody = document.getElementsByTagName("body")[0];
    THE_LEFT_SIDE = document.getElementById("leftSide");
    THE_RIGHT_SIDE = document.getElementById("rightSide");
    //Event handling
    THE_LEFT_SIDE.lastChild.onclick = function goToNextLevel() {
     alert("You clicked on correct face.");
     deleteFaces();
     generatefaces();
    };
    theBody.onclick = function gameOver() {
     alert("Game Over!!");
     theBody.onclick = null;
     THE_LEFT_SIDE.lastChild.onclick = null;
    };
   &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="generateFaces()"&gt;
   &lt;div id="leftSide"&gt;&lt;/div&gt;
   &lt;div id="rightSide"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am beginner in Javascript and ran into a problem while doing an assignment.
  It is Fact Matching game and you have to click the extra face on the left side and game continues until you click somewhere else than extra face on left.
  Above is the HTML file and JS code is embedded in it.</p>
  
  <p>I am getting an error as: <code>Uncaught TypeError: Cannot read property 'lastChild' of null</code> at line number 48, which is <code>onclick</code> event handler function on <code>lastChild</code> of <code>THE_LEFT_SIDE</code> div. I don't know how it is coming and what is the problem with my code?
  Any leads will be appreciated.</p>