일치하는 게임에서 증분이 작동하지 않음

Question

증분 된 numberOfFaces과 동일한 기능을 호출하려고하지만 이전 값인 5로만로드됩니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까? 내가하려는 것은 왼쪽의 마지막 아이를 클릭 한 후 함수를 반복하는 것입니다. 여기

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

:

 numberOfFaces += 5; 
     generateFaces(); 

귀하의 numberOfFaces 값이 5이고 당신이 그것에 5을 추가, 그래서 결과가 10입니다. 그 후 generateFaces를 호출하면 numberOfFaces가 0에 도달 할 때까지 감소하여 10 얼굴을 생성하고 다음 호출에서는 기대에 따라 5 얼굴을 생성합니다. 이 코드는 theLeftSide.lastChild.onclick에서 발생하므로 코드를 생성하고 그 요소를 클릭하면 numberOfFaces이 마지막으로 0으로 표시됩니다. 그러나이 click 처리기는 generateFaces 내부에 정의되어 있으며 호출되지 않습니다. 따라서 numberOfFaces은 절대로 변경되지 않습니다. 코드를 리팩토링해야합니다. generateFaces 외부에서 이벤트 처리기를 정의하면 그 이후에 괜찮습니다.