变量不会更新到功能之外

Question

正如标题所示，我的代码出了点问题。

该代码用于匹配游戏，我将文档分为两个（节点），并在一侧随机生成笑脸，然后将其克隆到另一侧。 我删除了RHS上的最后一个孩子（脸），以便用户随后必须单击页面LHS上的额外笑脸才能进入下一个级别，这时添加了5个笑脸以增加难度。 用户应该单击左侧的额外笑脸以进入下一个级别。

除了添加笑脸，其他所有操作都有效。 问题在于，当它达到下一个级别时，由于某种原因，它会将面孔的数量重置为5（或下面设置的带有相同注释文本的任何数量）！

<!DOCTYPE HTML>
<html>
<head>
    <style>
        img {position:absolute;}
        /*here i tried to use 500px in the style rules for the div but the division was noticeably off centre, therefore, i used 50% instead*/
        div {position:absolute; width:50%; height:50%} 
        #rightSide {left:50%; border-left: 1px solid black}
    </style>

</head>
<body onload="generateFaces()">

<h1 id="TitleOfGame">Matching Game!</h1>
    <p id="Intructions">To play the game, find the extra smiley on the left hand side and click on it :)</p>
    <div id="leftSide">
    <!--this div node will display all of the faces on the left side of the screen
        faces are dynamically added using javascript-->
    </div>
    <div id="rightSide">
    <!--this div node will display all of the faces on the right side of the screen
        cloneNode(true) is used to copy the faces to the right side, and the last child of this branch is deleted, such that there are more faces on the left side.
    -->
    </div>
            <script>
            //this part of the script generates 5 faces randomly placed on the left side of the screen
        var numberOfFaces=5;
        var theLeftSide = document.getElementById("leftSide");
        var i=0;
        var theBody=document.getElementsByTagName("body")[0];
        function generateFaces(){
            while (i<numberOfFaces){
                var random_top=((Math.random()*400));
                var random_left=((Math.random()*400));
                var random_top=Math.floor(random_top);
                var random_left=Math.floor(random_left);
                var img=document.createElement('img');
                img.src="smile.png";
                img.style.left=random_left+"px";
                img.style.top=random_top+"px";
                theLeftSide.appendChild(img);   
                i+=1;
                        //this part of the script clones those 5 faces onto the right side of the page.
            var theRightSide=document.getElementById("rightSide");
            var leftSideImages = theLeftSide.cloneNode(true);
            }
            theRightSide.appendChild(leftSideImages);
               leftSideImages=leftSideImages.removeChild(leftSideImages.lastChild);
            theLeftSide.lastChild.onclick=function nextLevel(event) {
                event.stopPropagation();
                while (theLeftSide.firstChild) {
                    theLeftSide.removeChild(theLeftSide.firstChild);
                }
                while (theRightSide.firstChild) {
                theRightSide.removeChild(theRightSide.firstChild);
                }
                numberOfFaces++;  //OK SO THE PROBLEM IS THAT WHEN IT GOES TO THE NEXT LEVEL, IT RESETS numberOfFaces to 5(or whatever the number that is set here) for some reason!
                numberOfFaces++;  //adding manually like this gives the same result as x+=5. ie. the variable is not being updated, it is being reset.
                numberOfFaces++;
                numberOfFaces++;
                generateFaces();
            };
                theBody.onclick=function youFail() {
                    alert("Game Over!");
                    theBody.onclick=null;
                    theLeftSide.lastChild.onclick=null;
                };
        };
        </script>
</body>
</html>

控制台未标记任何错误。

Answer 1

尝试在generateFaces函数中将i变量重置为0 。 您还要在generateFaces函数中添加计数器变量，因此，除非重置它，否则将永远不会添加其他面。

 //this part of the script generates 5 faces randomly placed on the left side of the screen var numberOfFaces=5; var theLeftSide = document.getElementById("leftSide"); var i=0; var theBody=document.getElementsByTagName("body")[0]; function generateFaces(){ i = 0; while (i<numberOfFaces){ var random_top=((Math.random()*400)); var random_left=((Math.random()*400)); var random_top=Math.floor(random_top); var random_left=Math.floor(random_left); var img=document.createElement('img'); img.src="smile.png"; img.style.left=random_left+"px"; img.style.top=random_top+"px"; theLeftSide.appendChild(img); i+=1; //this part of the script clones those 5 faces onto the right side of the page. var theRightSide=document.getElementById("rightSide"); var leftSideImages = theLeftSide.cloneNode(true); } theRightSide.appendChild(leftSideImages); leftSideImages=leftSideImages.removeChild(leftSideImages.lastChild); theLeftSide.lastChild.onclick=function nextLevel(event) { event.stopPropagation(); while (theLeftSide.firstChild) { theLeftSide.removeChild(theLeftSide.firstChild); } while (theRightSide.firstChild) { theRightSide.removeChild(theRightSide.firstChild); } numberOfFaces++; //OK SO THE PROBLEM IS THAT WHEN IT GOES TO THE NEXT LEVEL, IT RESETS numberOfFaces to 5(or whatever the number that is set here) for some reason! numberOfFaces++; //adding manually like this gives the same result as x+=5. ie. the variable is not being updated, it is being reset. numberOfFaces++; numberOfFaces++; generateFaces(); }; theBody.onclick=function youFail() { alert("Game Over!"); theBody.onclick=null; theLeftSide.lastChild.onclick=null; }; }; 

 img {position:absolute;} /*here i tried to use 500px in the style rules for the div but the division was noticeably off centre, therefore, i used 50% instead*/ div {position:absolute; width:50%; height:50%} #rightSide {left:50%; border-left: 1px solid black} 

 <body onload="generateFaces()"> <h1 id="TitleOfGame">Matching Game!</h1> <p id="Intructions">To play the game, find the extra smiley on the left hand side and click on it :)</p> <div id="leftSide"> <!--this div node will display all of the faces on the left side of the screen faces are dynamically added using javascript--> </div> <div id="rightSide"> <!--this div node will display all of the faces on the right side of the screen cloneNode(true) is used to copy the faces to the right side, and the last child of this branch is deleted, such that there are more faces on the left side. --> </div> </body>