Cannot read property 'appendChild' of null

Question

This is my code, and I'm a beginner in java script.

<!doctype html>
<html>
    <head>
        <style>
            div {position:absolute; width:500px; height:500px}
            img {position:absolute}
            #rightSide { left: 500px;
            border-left: 1px solid black }
        </style>
        <script>
           function generateFaces() {
               var numberOfFaces = 5;
               var theLeftSide = document.getElementById("leftSide");
               var theRightSide = document.getElementById("rightside");
               for (var i = 1; i <= 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);
               };
           }
        </script>
    </head>
    <body onload = "generateFaces()">
      <h1>Matching Game</h1>        
      <p>Click on the extra smiling face on the left.</p>
      <div id="leftSide"></div>
      <div id="rightSide"></div>
    </body>
</html>

the part where problem occurs is in function generate faces

function generateFaces() {
    var numberOfFaces = 5;
    var theLeftSide = document.getElementById("leftSide");
    var theRightSide = document.getElementById("rightside");
    for (var i = 1; i <= 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);
    };
}

when I append child using theRightSide.appendChild(theLeftimages); it shows an error as

Uncaught TypeError: Cannot read property 'appendChild' of null.

and I cant clone the images to the right side div.

Especially see my answer, first reason: http://stackoverflow.com/a/14028960/218196 . — Felix Kling, Nov 07 '15 at 02:57

score 0 · Answer 1 · answered Nov 07 '15 at 02:56

0

Javascript is case sensitive. It should be rightSide

var theRightSide = document.getElementById("rightSide");

Since it doesn't get the element, it return Null to theRightSide, which clearly doesn't have appendChild function :)

answered Nov 07 '15 at 02:56

Tree Nguyen

937
11
33

score 0 · Answer 2 · answered Nov 07 '15 at 02:57

document.getElementById(...) will return null if it cannot find an element with the given id.

// You need to change:
var theRightSide = document.getElementById("rightside");
// To:
var theRightSide = document.getElementById("rightSide");
                                              // ^ See capital 'S'

Cannot read property 'appendChild' of null

2 Answers2