Переменная не обновляется из функции

Что-то не так с моим кодом, как следует из моего названия.Переменная не обновляется из функции

Этот код предназначен для подходящей игры, я разделяю документ на два (узлы) и генерирую смайлики случайно на одной стороне, а затем клонирую их на другую сторону. Я удаляю последнего ребенка (лицо) на 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

Ах, отлично благодарю вас. Это было глупо от меня:/ –

Awesome :) рад, что сделал это! Не могли бы вы пометить мой ответ как правильный? – tnschmidt

Переменная не обновляется из функции

ответ

Смежные вопросы