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>

我收到错误

无法在'Node'上执行'removeChild'：参数1不是'Node'类型。

我已经浏览了Stack Overflow上的其他两篇帖子，但无法理解如何解决我的错误。在代码中我首先克隆所有图像，然后删除最后一个孩子，然后将所有图像添加到右侧所以它可以少1个。所以，如果有人可以提供帮助。提前谢谢。

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在克隆时不包含子项，从而leftsideimages.lastChild() null。

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

无法在'Node'上执行'removeChild'：参数1不是'Node'类型

2 个答案: