变量不会更新功能

我的代码有问题，正如我的标题所暗示的。变量不会更新功能

此代码适用于匹配游戏，我将文档分成两个（节点），并在一侧随机生成笑脸，然后将其克隆到另一侧。我删除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>

没有通过控制台标记错误..

来源

2015-09-29 J_Suntown

试试你的i变量重置为0的generateFaces函数内。您还可以在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>

来源

2015-09-29 22:52:21 tnschmidt

@J_Suntown没有这个回答你的问题？ – tnschmidt

Ach，完美的谢谢你。这真是愚蠢的：/ –

真棒:)很高兴做到了！你能将我的答案标记为正确吗？ – tnschmidt

变量不会更新功能

回答

相关问题