How to resolve the below given JS error?

Question

Here is what I am trying to accomplish:

A new variable called theRightSide is created. This points to the right side div e.g.

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

After all the images have been created and added to the leftSide div, use cloneNode(true) to copy the leftSide div e.g. leftSideImages = theLeftSide.cloneNode(true); Then, delete the last child of leftSideImages Then, add leftSideImages to the rightSide div

Here 's my code:

    <html>
    <head>
    <style type="text/css">
        img {
            position:absolute;
        }
        div {
            position:absolute;
            width:500px; 
            height:500px;
        }

        #rightSide { left: 500px; 
            border-left: 1px solid black; 
        }


    </style>

    </head>
    <body onload="generateFaces()">
        <h1>Matching Game</h1>
        <div id="leftSide"></div>
        <div id="rightSide"></div>
        <script>
            var numberOfFaces=5;
            var theLeftSide = document.getElementById("leftSide");
            function generateFaces(){
                for (var i = 0; i < numberOfFaces; i++) 
                {
                    var img = document.createElement("IMG");
                    img.src="smile.png";
                    img.style.top=Math.floor(Math.random()*401);
                    img.style.height=100;
                    img.style.left=Math.floor(Math.random()*401);
                    theLeftSide.appendChild(img);

                };
            }

            leftSideImages = theLeftSide.cloneNode(true);
            var theRightSide = document.getElementById("rightSide");
            leftSideImages.removeChild(leftSideImages.lastChild);
            theRightSide.appendChild(leftSideImages);
        </script>
    </body>
</html>

Error: Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.

Please help me resolve this two errors.

http://stackoverflow.com/questions/22057610/uncaught-typeerror-cannot-read-property-value-of-null — , Nov 11 '15 at 19:18
Do `console.log(leftSideImages.lastChild)` (a.k.a the thing it's saying isn't a Node) and you'll find out what's wrong. — Mike Cluck, Nov 13 '15 at 17:55

AtheistP3ace · Accepted Answer · 2015-11-13T20:56:49.300

1

It seems to suggest that

var theLeftSide = document.getElementById("leftSide");

is returning null. Are you are that element exists and has that id?

Fiddle: http://jsfiddle.net/yuhc6rdm/

edited Nov 13 '15 at 20:56

answered Nov 11 '15 at 19:15

AtheistP3ace

9,133
12
41
40

Yeah Sure.
– datavinci Nov 12 '15 at 04:08
@DiscoDancer then my next question would be when is that code running? Perhaps before the DOM has that element? – AtheistP3ace Nov 12 '15 at 14:09
Hey I got that resolved by placing the script last in body tag.But now I am getting an error with leftSideImages.removeChild(leftSideImages.lastChild); that lestSideImages is not of type node. – datavinci Nov 12 '15 at 18:45
So yes the problem was that the script was running before that element was in DOM. For your next issue I would ask what are you running to populate leftSideImages? Seems like from name its an array of elements so lastChild would not be an existing property. – AtheistP3ace Nov 12 '15 at 18:47
i am trying to populate that with the 5 divs of left side then remove the last child. – datavinci Nov 12 '15 at 18:49
Right, but what is the code you use to populate that variable. That will tell me what type it is and why lastChild is not an available property. – AtheistP3ace Nov 12 '15 at 18:51
this i guess: leftSideImages = theLeftSide.cloneNode(true); – datavinci Nov 12 '15 at 18:53
Dude, I have been trying to help you but there is so much in your code I am not aware of. And when I ask questions you attempt to explain with words what your code is doing. I need to see the code. And when you do show code its one line and you are guessing. You need to help me before I can help you. Update your question with the latest code. Adding a comment with 20 question marks is not a good way to go about getting help. I am helping to be nice and on my own schedule. – AtheistP3ace Nov 13 '15 at 16:18
Done,now please check. – datavinci Nov 13 '15 at 16:22
add html too, i need to see everything going on. – AtheistP3ace Nov 13 '15 at 16:24
Done,please check now. – datavinci Nov 13 '15 at 16:32
Give me a little and I'll look. Not at computer right now. – AtheistP3ace Nov 13 '15 at 16:59
The error comes from lastChild being null because it has no child. Your images were not being appended to the leftSide div. I have updated my answer with a fiddle where the code runs correctly. Well at least without an error. I now pass the element into the generateFaces function and they properly append. – AtheistP3ace Nov 13 '15 at 20:56
Thanks a lot dude!!!and sorry for showing impatience. – datavinci Nov 14 '15 at 06:36

How to resolve the below given JS error?

1 Answers1