第二次单击按钮不起作用（JQuery）

Question

I have a onClick function work on button click event.
The problem is this function is working for one time only for each button

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

      });

When I click any button for the first it worked but when i click the same button second time it does not work.

Answer 1

The player score is defined at 100, and you're not getting the updated score on button click. You can fix this by updating the score in your function, which can be done by doing:

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

Your function becomes:

$(".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
});

Try it out in the following snippet:

 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>