无法在“节点”上执行“removeChild”：参数 1 的类型不是“节点”

Question

我正在使用 Javascript 制作一个小游戏，其中有两个面。左侧有 5 张图片，右侧有 4 张图片。当用户单击左侧缺少的图片时，游戏会转到下一层。我还没有写完整的代码。我写了下面的代码

<!--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>

我收到错误

无法在“节点”上执行“removeChild”：参数 1 的类型不是“节点”。

我已经浏览了 Stack Overflow 上的另外两篇文章，但无法理解如何修复我的错误。可以少 1.So 如果有人可以帮忙。 提前致谢。

Answer 1

您的脚本在正文中内联，因此它在创建正文时正在运行 - 并且generateFaces()函数所做的任何事情在它之后的代码肯定无法访问（该方法是在脚本运行期间创建的）身体加载，但直到身体完成加载后才实际调用）

我已经稍微重新排列了你的代码：

<!--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>

Answer 2

您还没有调用generateFaces() 。 因此， theLeftSide在被克隆时不包含子theLeftSide ，从而使leftsideimages.lastChild() null 。

别担心，我们以前都去过那里！

无法在“节点”上执行“removeChild”：参数 1 的类型不是“节点”

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-05-28 04:19:20

解决方案2
0 2016-05-28 04:12:36

无法在“节点”上执行“removeChild”：参数 1 的类型不是“节点”

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-05-28 04:19:20

解决方案2 0 2016-05-28 04:12:36

解决方案1
1 已采纳 2016-05-28 04:19:20

解决方案2
0 2016-05-28 04:12:36