Question

实际问题是我想在左侧生成五个图像并将其克隆到右侧，我的代码是：

 <html>
    <head>
    <style>
        img{
            position: absolute;
        }
        div{
            position: absolute;
            width: 500px;
            height: 500px;
        }
        #rightSide { left: 500px; 
                    border-left: 1px solid black;
        }

    </style>
    <script>
        // var numberOfFaces = 5;
        // var theLeftSide = document.getElementById("leftSide");
        function generateFaces(){
            var numberOfFaces = 5;
            var theLeftSide = document.getElementById("leftSide");
            for (var i = 0; i < numberOfFaces; i++){
                var img = document.createElement("img");
                img.src = "smile.png";

                var randomTop = Math.random() * 400;
                var randomLeft = Math.random() * 400;
                img.style.top = randomTop + "px";
                img.style.left = randomLeft + "px";
                theLeftSide.appendChild(img);
            }
            var theRightSide = document.getElementById("rightSide");
            leftSideImages = theLeftSide.cloneNode(true);
            leftSideImages.removeChild(leftSideImages.lastChild);
            document.getElementById("rightSide").appendChild("leftSideImages");

        }

        window.onload = generateFaces;
    </script>
    </head>
    <body>
    <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>

错误消息是jspart4.html：36未捕获的TypeError：无法执行＆＃39; appendChild＆＃39; on＆＃39;节点＆＃39;：参数1不是类型＆＃39;节点＆＃39;。在generateFaces（jspart4.html：36）

有什么问题？

然后我想玩这个游戏，如果点击额外的笑容，生成更多，或者显示＆＃34;游戏结束，我的代码是：

function generateFaces(){

        var theLeftSide = document.getElementById("leftSide");
        for (var i = 0; i < numberOfFaces; i++){
            var img = document.createElement("img");
            img.src = "smile.png";

            var randomTop = Math.random() * 400;
            var randomLeft = Math.random() * 400;
            img.style.top = randomTop + "px";
            img.style.left = randomLeft + "px";
            theLeftSide.appendChild(img);
        }
        var theRightSide = document.getElementById("rightSide");
        leftSideImages = theLeftSide.cloneNode(true);
        leftSideImages.removeChild(leftSideImages.lastChild);
        document.getElementById("rightSide").appendChild(leftSideImages);
        var theBody = document.getElementByTagName("body")[0];
        theLeftSide.lastChild.onclick = function nextLevel(event){
            event.stopPropagation();
            while (theBody.firstChild){
                theBody.removeChild(theBody.firstChild);
            }
            numberOfFaces += 5;
            generateFaces();
        }
        theBody.onclick = function gameover(){
            alert("Game Over");
            thBody.onclick = null;
            theLeftSide.lastChild.onclick = null;

        }

    }

但是当我点击额外的微笑或身体时，没有任何反应，你能帮忙解决它吗？

Answer 1

你犯了错误

document.getElementById("rightSide").appendChild("leftSideImages");

从""中删除leftSideImages

document.getElementById("rightSide").appendChild(leftSideImages);

 // var numberOfFaces = 5;
        // var theLeftSide = document.getElementById("leftSide");
        function generateFaces(){
            var numberOfFaces = 5;
            var theLeftSide = document.getElementById("leftSide");
            for (var i = 0; i < numberOfFaces; i++){
                var img = document.createElement("img");
                img.src = "smile.png";

                var randomTop = Math.random() * 400;
                var randomLeft = Math.random() * 400;
                img.style.top = randomTop + "px";
                img.style.left = randomLeft + "px";
                theLeftSide.appendChild(img);
            }
            var theRightSide = document.getElementById("rightSide");
            leftSideImages = theLeftSide.cloneNode(true);
            leftSideImages.removeChild(leftSideImages.lastChild);
            document.getElementById("rightSide").appendChild(leftSideImages);

        }

        window.onload = generateFaces;

img{
            position: absolute;
        }
        div{
            position: absolute;
            width: 500px;
            height: 500px;
        }
        #rightSide { left: 500px; 
                    border-left: 1px solid black;
        }

<html>
    <body>
    <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>

Dom cloneNode不起作用

1 个答案: