Второе нажатие на кнопку не работает (JQuery)

Question

У меня есть функция onClick, работающая с событием нажатия кнопки.
Проблема в том, что эта функция работает только один раз для каждой кнопки

HTML:

<div id="playerScore">120</div>
            <div class="col-md-12 bg-dark">
               <div class="btn-group d-flex align-content-stretch" role="group" aria-label="Basic example">
                  <button type="button" data-score="5" class="btn scoreBtn btn-secondary">5</button>
                  <button type="button" data-score="6" class="btn scoreBtn btn-secondary">6</button>
                  <button type="button" data-score="7" class="btn scoreBtn btn-secondary">7</button>
                  <button type="button" data-score="8" id="scoreBtn" class="btn scoreBtn btn-secondary">8</button>
               </div>
            </div>
            <div class="col-md-12 bg-dark">
               <div class="btn-group d-flex align-content-stretch" role="group" aria-label="Basic example">
                  <button type="button" data-score="9" class="btn scoreBtn btn-secondary">9</button>
                  <button type="button" data-score="10" class="btn scoreBtn btn-secondary">10</button>
                  <button type="button" data-score="11" class="btn scoreBtn btn-secondary">11</button>
                  <button type="button" data-score="12" class="btn scoreBtn btn-secondary">12</button>
               </div>
            </div>

JQuery:

 var playerScore = 100; //starting score
  $('#playerScore').html(playerScore); // set starting player score

$(".scoreBtn").click(function() {
         var getCurrentScore = playerScore; //get player score
         var clickedScore = $(this).attr("data-score"); // get clicked button score
         var newScore = getCurrentScore - clickedScore; // subtract current score from clicked button score

         $('#playerScore').html(newScore); //update current score

      });

Когда я нажимаю любую кнопку в первый раз, она работает, но когда я нажимаю эту же кнопку во второй раз, она не работает.

Answer 1

Счет игрока определен в 100, и вы не получите обновленный счет при нажатии кнопки. Вы можете исправить это, обновив счет в вашей функции, что можно сделать, выполнив:

var getCurrentScore = $('#playerScore').text(); //get player score

Ваша функция станет:

$(".scoreBtn").click(function() {
     var getCurrentScore = $('#playerScore').text(); //get player score
     var clickedScore = $(this).attr("data-score"); // get clicked button score
     var newScore = getCurrentScore - clickedScore; // subtract current score from clicked button score

     $('#playerScore').html(newScore); //update current score
});

Попробуйте это в следующем фрагменте:

var playerScore = 100; //starting score
$('#playerScore').html(playerScore); // set starting player score

$(".scoreBtn").click(function() {
   var getCurrentScore = $('#playerScore').text(); //get player score
   var clickedScore = $(this).attr("data-score"); // get clicked button score
   var newScore = getCurrentScore - clickedScore; // subtract current score from clicked button score

   $('#playerScore').html(newScore); //update current score

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="playerScore">120</div>
<div class="col-md-12 bg-dark">
   <div class="btn-group d-flex align-content-stretch" role="group" aria-label="Basic example">
      <button type="button" data-score="5" class="btn scoreBtn btn-secondary">5</button>
      <button type="button" data-score="6" class="btn scoreBtn btn-secondary">6</button>
      <button type="button" data-score="7" class="btn scoreBtn btn-secondary">7</button>
      <button type="button" data-score="8" id="scoreBtn" class="btn scoreBtn btn-secondary">8</button>
   </div>
</div>
<div class="col-md-12 bg-dark">
   <div class="btn-group d-flex align-content-stretch" role="group" aria-label="Basic example">
      <button type="button" data-score="9" class="btn scoreBtn btn-secondary">9</button>
      <button type="button" data-score="10" class="btn scoreBtn btn-secondary">10</button>
      <button type="button" data-score="11" class="btn scoreBtn btn-secondary">11</button>
      <button type="button" data-score="12" class="btn scoreBtn btn-secondary">12</button>
   </div>
</div>