title: Cannot read property 'appendChild' of null
body: <p>This is my code, and I'm a beginner in java script.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="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;style&gt;
              div {position:absolute; width:500px; height:500px}
              img {position:absolute}
              #rightSide { left: 500px;
              border-left: 1px solid black }
          &lt;/style&gt;
          &lt;script&gt;
             function generateFaces() {
                 var numberOfFaces = 5;
                 var theLeftSide = document.getElementById("leftSide");
                 var theRightSide = document.getElementById("rightside");
                 for (var i = 1; i &lt;= numberOfFaces; i++) {
                     this_img = document.createElement("img");
                     this_img.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
                     var topIndex = Math.floor(Math.random() * 401);
                     var leftIndex = Math.floor(Math.random() * 401);
                     this_img.style.top = topIndex + "px";
                     this_img.style.left = leftIndex + "px";
                     this_img.style.position = "absolute";
                     theLeftSide.appendChild(this_img);
                     theLeftimages = document.cloneNode(true);
                     theLeftimages = theLeftimages.removeChild(theLeftimages.lastChild);
                     theRightSide.appendChild(theLeftimages);
                 };
             }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body onload = "generateFaces()"&gt;
        &lt;h1&gt;Matching Game&lt;/h1&gt;        
        &lt;p&gt;Click on the extra smiling face on the left.&lt;/p&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>the part where problem occurs is in function generate faces</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function generateFaces() {
      var numberOfFaces = 5;
      var theLeftSide = document.getElementById("leftSide");
      var theRightSide = document.getElementById("rightside");
      for (var i = 1; i &lt;= numberOfFaces; i++) {
          this_img = document.createElement("img");
          this_img.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
          var topIndex = Math.floor(Math.random() * 401);
          var leftIndex = Math.floor(Math.random() * 401);
          this_img.style.top = topIndex + "px";
          this_img.style.left = leftIndex + "px";
          this_img.style.position = "absolute";
          theLeftSide.appendChild(this_img);
          theLeftimages = document.cloneNode(true);
          theLeftimages = theLeftimages.removeChild(theLeftimages.lastChild);
          theRightSide.appendChild(theLeftimages);
      };
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>when I append child using theRightSide.appendChild(theLeftimages);
  it shows an error as</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'appendChild' of null.</p>
  </blockquote>
  
  <p>and I cant clone the images to the right side div.</p>