Блог

Главная - Вопросы по программированию - Счетчик работает только при первом нажатии для игры jQuery

Счетчик работает только при первом нажатии для игры jQuery

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

Я новичок в js и jQuery. Я пытаюсь увеличить счетчик каждый раз, когда игра выиграна. Но счетчик только когда-либо доходит до цифры один, а затем останавливается. Кто-то сказал мне, что мне нужно объявить новый результат вне функции обратного вызова. Я пробовал оба способа: вне функции в операторе if и внутри оператора else. Я получаю тот же результат, несмотря ни на что. Надеялся, что кто-нибудь сможет указать, где я ошибаюсь, и как это исправить.

 const myApp = {};
// number option callback function
myApp.handleChoiceClick = function() {
  // save selected number from user
  const userNumber = parseInt($(this).val());
  // disable other buttons after choice has been picked
  $('.numberOption').attr('disabled', true);
  // save randomly generate number between zero and five for computer player
  const opponentNumber = Math.floor(Math.random() * 5)   1;
  // have the chosen number for the user and the computer display on the page with a hand
  const displayHand = function() {
    $(`.evenFinger${userNumber}`).css('z-index', '10');
    $(`.finger${opponentNumber}`).css('z-index', '10');
  };
  displayHand();
  // set score counter to zero
  // compare if even or odd wins by using modulos
  // display "winner"/"lose" on the page if the user wins/loses
  const summedFingers = userNumber   opponentNumber;
  if (summedFingers % 2 === 0) {
    $('.winSum').html(`${summedFingers} fingers`);
    $('.winDeclaration').html('evens wins');
    $(`.playAgain`).css('visibility', 'visible');
    // add score to user
    const userScore = 1;
    myApp.evenScoreUpdate(userScore);
  } else {
    $('.winSum').html(`${summedFingers} fingers`);
    $('.winDeclaration').html('odds wins');
    $(`.playAgain`).css('visibility', 'visible');
    // add score to opponent
    let opponentScore = 0;
    opponentScore  = 1;
    $('.oddScore').html(opponentScore);
  }
};
myApp.evenScoreUpdate = function(evenScore) {
  let newscore = 0;
  newscore  = evenScore;
  $('.evenScore').html(newscore);
};
// create a play again button the resets the code
myApp.handlePlayAgainClick = function() {
  $('.handReset').css('z-index', '0');
  $('.playAgain').css('visibility', 'hidden');
  $('.winSum').html(' ');
  $('.winDeclaration').html(' ');
  $('.numberOption').attr('disabled', false);
};
// fade in header text on pageload
myApp.headerAnimate = function() {
  $('.hidden').fadeIn(1250).removeClass('hidden');
};
// play again click function
myApp.playAgain = function() {
  $('.playAgain').on('click', myApp.handlePlayAgainClick);
};
// number option click function
myApp.clickNumbers = function() {
  $('.numberOption').on('click', myApp.handleChoiceClick);
};
// initialization
myApp.init = function() {
  myApp.clickNumbers();
  myApp.playAgain();
  myApp.headerAnimate();
};
// pageload
$(function() {
  myApp.init();
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scoreCounter">
  <h2>Even</h2>
  <h2 class="evenScore">0</h2>
  <h2>Odd</h2>
  <h2 class="oddScore">0</h2>
</div>
<div class="optionContainer">
  <button class="numberOption" value="1"><img src="./assets/fingerprint1.png" alt="1"></button>
  <button class="numberOption" value="2"><img src="./assets/fingerprint2.png" alt="2"></button></button>
  <button class="numberOption" value="3"><img src="./assets/fingerprint3.png" alt="3"></button></button>
  <button class="numberOption" value="4"><img src="./assets/fingerprint4.png" alt="4"></button></button>
  <button class="numberOption" value="5"><img src="./assets/fingerprint5.png" alt="5"></button></button>
</div>
<div class="victoryStatement">
  <h2 class="winSum"></h2>
  <h2 class="winDeclaration"></h2>
  <button class="playAgain">Play Again</button>
</div>

Ответ №1:

Определить переменные оценки вне функции, что означает определить их вне функции:

 const myApp = {};
let userScore = 0;
let opponentScore = 0;
...

и не инициализируйте их повторно при каждом myApp.handleChoiceClick вызове. Однако вам лучше добавить эти значения в качестве myApp свойств объекта и инициализировать их в init функции:

 myApp.init = function() {
  myApp.userScore = 0;
  myApp.opponentScore = 0;
  myApp.clickNumbers();
  myApp.playAgain();
  myApp.headerAnimate();
};

Используйте оператор для увеличения свойства переменной / объекта (не имеет значения, просто более обычный способ сделать это):

 if (summedFingers % 2 === 0) {
  ...
  // add score to user
  myApp.userScore   ;
  $('.evenScore').html(myApp.userScore);
} else {
  ...
  // add score to opponent
  myApp.opponentScore   ;
  $('.oddScore').html(myApp.opponentScore);
}

Весь код будет

 const myApp = {};
// number option callback function
myApp.handleChoiceClick = function() {
  // save selected number from user
  const userNumber = parseInt($(this).val());
  // disable other buttons after choice has been picked
  $('.numberOption').attr('disabled', true);
  // save randomly generate number between zero and five for computer player
  const opponentNumber = Math.floor(Math.random() * 5)   1;
  // have the chosen number for the user and the computer display on the page with a hand
  const displayHand = function() {
    $(`.evenFinger${userNumber}`).css('z-index', '10');
    $(`.finger${opponentNumber}`).css('z-index', '10');
  };
  displayHand();
  // set score counter to zero
  // compare if even or odd wins by using modulos
  // display "winner"/"lose" on the page if the user wins/loses
  const summedFingers = userNumber   opponentNumber;
  if (summedFingers % 2 === 0) {
    $('.winSum').html(`${summedFingers} fingers`);
    $('.winDeclaration').html('evens wins');
    $(`.playAgain`).css('visibility', 'visible');
    // add score to user
    myApp.userScore   ;
    $('.evenScore').html(myApp.userScore);
  } else {
    $('.winSum').html(`${summedFingers} fingers`);
    $('.winDeclaration').html('odds wins');
    $(`.playAgain`).css('visibility', 'visible');
    // add score to opponent
    myApp.opponentScore   ;
    $('.oddScore').html(myApp.opponentScore);
  }
};
// create a play again button the resets the code
myApp.handlePlayAgainClick = function() {
  $('.handReset').css('z-index', '0');
  $('.playAgain').css('visibility', 'hidden');
  $('.winSum').html(' ');
  $('.winDeclaration').html(' ');
  $('.numberOption').attr('disabled', false);
};
// fade in header text on pageload
myApp.headerAnimate = function() {
  $('.hidden').fadeIn(1250).removeClass('hidden');
};
// play again click function
myApp.playAgain = function() {
  $('.playAgain').on('click', myApp.handlePlayAgainClick);
};
// number option click function
myApp.clickNumbers = function() {
  $('.numberOption').on('click', myApp.handleChoiceClick);
};
// initialization
myApp.init = function() {
  myApp.userScore = 0;
  myApp.opponentScore = 0;
  myApp.clickNumbers();
  myApp.playAgain();
  myApp.headerAnimate();
};
// pageload
$(function() {
  myApp.init();
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scoreCounter">
  <h2>Even</h2>
  <h2 class="evenScore">0</h2>
  <h2>Odd</h2>
  <h2 class="oddScore">0</h2>
</div>
<div class="optionContainer">
  <button class="numberOption" value="1"><img src="./assets/fingerprint1.png" alt="1"></button>
  <button class="numberOption" value="2"><img src="./assets/fingerprint2.png" alt="2"></button></button>
  <button class="numberOption" value="3"><img src="./assets/fingerprint3.png" alt="3"></button></button>
  <button class="numberOption" value="4"><img src="./assets/fingerprint4.png" alt="4"></button></button>
  <button class="numberOption" value="5"><img src="./assets/fingerprint5.png" alt="5"></button></button>
</div>
<div class="victoryStatement">
  <h2 class="winSum"></h2>
  <h2 class="winDeclaration"></h2>
  <button class="playAgain">Play Again</button>
</div>