Inkrement funktioniert nicht in passendem Spiel

Question

Ich versuche, die gleiche Funktion mit inkrementiert numberOfFaces, aber es laden mit dem vorherigen Wert von nur 5. Was mache ich falsch? Ich versuche nur, die Funktion zu wiederholen, nachdem ich auf das letzte Kind der linken Seite geklickt habe.

var numberOfFaces = 5; 

    function generateFaces() { 


     var theRightSide = document.getElementById("rightSide"); 
     var theLeftSide = document.getElementById("leftSide"); 

     var theBody = document.getElementsByTagName("body")[0]; 

     while(numberOfFaces > 0) { 
      // CREATING IMG ELEMENTS AND APPENDING THEM TO THE LEFTSIDE DIV 
      var img = document.createElement("img"); 
      img.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" ; 
      img.style.top = Math.floor(Math.random() * 400) +"px"; 
      img.style.left = Math.floor(Math.random() * 400) +"px"; 
      theLeftSide.appendChild(img); 

      // CLONING THE LEFT SIDE DIV ELEMENTS, REMOVING THE LAST CHILD AND APPENDING THEM TO THE RIGHT CHILD 
      var leftSideImages = theLeftSide.cloneNode(true); 
      leftSideImages.removeChild(leftSideImages.lastChild); 
      theRightSide.appendChild(leftSideImages); 
      numberOfFaces--; 
     } 

     theLeftSide.lastChild.onclick = function nextLevel(event){ 
      event.stopPropagation(); 
      while (theLeftSide.firstChild) { 
       theLeftSide.removeChild(theLeftSide.firstChild); 
      } 
      while (theRightSide.firstChild) { 
       theRightSide.removeChild(theRightSide.firstChild); 
      } 
      numberOfFaces += 5; 
      generateFaces(); 
     }; 

     theBody.onclick = function gameOver(event) { 
      alert("Game Over!"); 
      theBody.onclick = null; 
      theLeftSide.lastChild.onclick = null; 
     } 
    } 

Answer 1

hier:

 numberOfFaces += 5; 
     generateFaces(); 

Ihr numberOfFaces Wert ist 5 und fügen Sie 5 es, so das Ergebnis ist 10. Danach rufen Sie generateFaces auf, was numberOfFaces dekrementiert, bis es 0 erreicht, 10 Gesichter erzeugt und beim nächsten Aufruf 5 Gesichter entsprechend der Erwartung erzeugt. Dies geschieht innerhalb von theLeftSide.lastChild.onclick, also erwarten Sie, dass Ihr Code die Flächen erzeugt und am Ende numberOfFaces als hat, wenn Sie auf dieses Element klicken. Dieser click Handler ist jedoch innerhalb von generateFaces definiert, der niemals aufgerufen wird, daher wird numberOfFaces niemals geändert. Sie müssen Ihren Code umgestalten. Definieren Sie Ihre Event-Handler außerhalb generateFaces und Sie sollten danach in Ordnung sein.