javascript - Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node

I am making a small game using Javascript in which there are two sides.In the left side there are 5 pic

I am making a small game using Javascript in which there are two sides.In the left side there are 5 pics and in the right side there are 4 pics.When the user clicks on the missing picture on the left side then the game goes to the next level.I haven't written the full code yet.I have written the following code

<!--smile game-->
<!DOCTYPE html>
<html>
    <head>
        <title>Matching Game part3</title>
        <meta charset = "UTF-8">
        <style>
            img
            {
                position: absolute;
            }
            div
            {
                position: absolute;
                width: 500px;
                height: 500px; 
            }
            #rightside
            {
                left: 500px;
                border-left: 1px solid black;
            }

        </style>

    </head>
    <body id ="theBody" 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>

        <script>
            var numberOfFaces = 5;
            var theLeftSide = document.getElementById("leftside");
            var theRightSide = document.getElementById("rightside");
            function generateFaces()
            {
                for(var i =0; i<numberOfFaces; i++)
                {
                    var image = document.createElement("img");
                    image.src = ".png";
                    image.style.top  = Math.floor(Math.random() * 400) + "px";
                    image.style.left  = Math.floor(Math.random() * 400) + "px";
                    document.getElementById("leftside").appendChild(image);
                }
            }

            leftsideimages = theLeftSide.cloneNode(true);
            leftsideimages.removeChild(leftsideimages.lastChild);
            theRightSide.appendChild(leftsideimages);

        </script>
    </body>
</html>

And I am getting the error

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

I have gone through the two other posts here on Stack Overflow but cannot understand how to fix my error.In the code I am first clong all the images and then removing the last child and then adding all the images to the right side so that it can be 1 less.So if anyone could help. Thanks in advance.

I am making a small game using Javascript in which there are two sides.In the left side there are 5 pics and in the right side there are 4 pics.When the user clicks on the missing picture on the left side then the game goes to the next level.I haven't written the full code yet.I have written the following code

<!--smile game-->
<!DOCTYPE html>
<html>
    <head>
        <title>Matching Game part3</title>
        <meta charset = "UTF-8">
        <style>
            img
            {
                position: absolute;
            }
            div
            {
                position: absolute;
                width: 500px;
                height: 500px; 
            }
            #rightside
            {
                left: 500px;
                border-left: 1px solid black;
            }

        </style>

    </head>
    <body id ="theBody" 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>

        <script>
            var numberOfFaces = 5;
            var theLeftSide = document.getElementById("leftside");
            var theRightSide = document.getElementById("rightside");
            function generateFaces()
            {
                for(var i =0; i<numberOfFaces; i++)
                {
                    var image = document.createElement("img");
                    image.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
                    image.style.top  = Math.floor(Math.random() * 400) + "px";
                    image.style.left  = Math.floor(Math.random() * 400) + "px";
                    document.getElementById("leftside").appendChild(image);
                }
            }

            leftsideimages = theLeftSide.cloneNode(true);
            leftsideimages.removeChild(leftsideimages.lastChild);
            theRightSide.appendChild(leftsideimages);

        </script>
    </body>
</html>

And I am getting the error

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

I have gone through the two other posts here on Stack Overflow but cannot understand how to fix my error.In the code I am first clong all the images and then removing the last child and then adding all the images to the right side so that it can be 1 less.So if anyone could help. Thanks in advance.

Share Improve this question asked May 28, 2016 at 4:02 john400john400 4024 gold badges11 silver badges21 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 1

Your script is inline in the body, so it's being run while the body is being created - and anything done by the generateFaces() function definitely won't be accessible by the code after it (the method is created when the script is run during the body load, but is not actually called until after the body is finished loading)

I've rearranged your code somewhat:

<!--smile game-->
<!DOCTYPE html>
<html>
<head>
<title>Matching Game part3</title>
<meta charset = "UTF-8">
<style>
    img
    {
        position: absolute;
    }
    div
    {
        position: absolute;
        width: 500px;
        height: 500px;
    }
    #rightside
    {
        left: 500px;
        border-left: 1px solid black;
    }
</style>
<script>
var numberOfFaces = 5;
function generateFaces()
{
    for(var i =0; i<numberOfFaces; i++)
    {
        var image = document.createElement("img");
        image.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
        image.style.top  = Math.floor(Math.random() * 400) + "px";
        image.style.left  = Math.floor(Math.random() * 400) + "px";
        document.getElementById("leftside").appendChild(image);
    }
}

function init() {
    var theLeftSide = document.getElementById("leftside");
    var theRightSide = document.getElementById("rightside");
    generateFaces();
    leftsideimages = theLeftSide.cloneNode(true);
    leftsideimages.removeChild(leftsideimages.lastChild);
    theRightSide.appendChild(leftsideimages);
}
</script>
</head>
<body id ="theBody" onload="init()">
    <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>

You have not yet called generateFaces(). As such, theLeftSide contains no children when it is cloned, making leftsideimages.lastChild() null.

Not to worry, we've all been there before!

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745491836a4630019.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信