DOM Javascript正在删除子节点

DOM Javascript deleting Child Nodes

本文关键字：删除 子节点 Javascript DOM      更新时间：2023-09-26

我正在学习编码，需要一些帮助。我尝试了一些东西，但不起作用。我必须做一个游戏，最后我必须这样做：

**此评估任务要求您制作一个互动游戏。比赛开始时，左边显示五张脸，右边显示四张脸。左侧和右侧是相同的，除了一件事：左侧有一个额外的面。用户需要点击那张多余的脸。如果点击了除正确人脸以外的任何内容，则会显示一条消息，说明游戏结束。如果单击了正确的面，则会删除所有当前显示的面，并在随机位置显示一组新的面。每次显示一组新的面时，左侧和右侧都会比以前多出5个面。总会有一张额外的脸出现在左边。

例如，让我们假设你正在玩上图中所示的游戏。点击额外的人脸（顶部）后，所有人脸都消失了，并显示了下面的一组新人脸。**

删除子节点
记住，每次玩家点击正确的人脸时，所有人脸都会被删除，并生成一组新的人脸。因此，这意味着在适当的位置，需要删除leftSidediv和rightSidediv下的所有子项。您之前学习了如何使用while循环删除课程中的所有子节点。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Matching Game</title>
<style>
    img {position: absolute;}
    div {position: absolute; width: 500px; height: 500px;}
    #rightSide {left: 500px; border-left: 1px solid black;}
</style>
<script>
    index = 0;
    var numberOfFaces = 5;
    var theLeftSide = document.getElementById("leftSide");
    var theRightSide = document.getElementById("rightSide");
            function generateFaces() {
                while (index<numberOfFaces) {
                    var images = document.createElement("img");
                    images.setAttribute("src", "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png");
                    images.style.left = Math.floor(Math.random() * 400 ) + "px";
                    images.style.top = Math.floor(Math.random() * 400 ) + "px";
                    document.getElementById("leftSide").appendChild(images);
                    index++;
                }
                leftSideImages = document.getElementById("leftSide").cloneNode(true);
                leftSideImages.removeChild(leftSideImages.lastChild);                   
                document.getElementById("rightSide").appendChild(leftSideImages);    
                var theBody = document.getElementsByTagName("body")[0];
                document.getElementById("leftSide").lastChild.onclick = function nextLevel(event) { 
                    event.stopPropagation();
                    //var delete_nodes = document.getElementById("leftSide");
                    //while (delete_nodes.firstChild)
                    //  delete_nodes.removeChild (delete_nodes.firstChild);
                    numberOfFaces += 5;
                    generateFaces();    
                };
                theBody.onclick = function gameOver() {
                    alert("Game Over!");
                    theBody.onclick = null;
                    theLeftSide.lastChild.onclick = null;
                }; 
            }
</script>
</head>
<body 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>
</body>
</html>

谢谢你抽出时间！

此评估任务要求您制作一个交互式游戏。比赛开始时，左边显示五张脸，右边显示四张脸。左侧和右侧是相同的，除了一件事：左侧有一个额外的面。用户需要点击那张多余的脸。如果点击了除正确人脸以外的任何内容，则会显示一条消息，说明游戏结束。如果单击了正确的面，则会删除所有当前显示的面，并在随机位置显示一组新的面。每次显示一组新的面时，左侧和右侧都会比以前多出5个面。总会有一张额外的脸出现在左边。

例如，让我们假设你正在玩上图中所示的游戏。点击额外的人脸（顶部）后，所有人脸都会消失，并显示下面的一组新人脸。

相关文章：