變量不會更新功能

我的代碼有問題，正如我的標題所暗示的。變量不會更新功能

此代碼適用於匹配遊戲，我將文檔分成兩個（節點），並在一側隨機生成笑臉，然後將其克隆到另一側。我刪除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

變量不會更新功能

回答

相關問題