how to edit jquery calculation start from zero

I want my code to start from zero at the total odds and the payout amount, the button with 9.00 is supposed to append the div to the cart and remove when i re-click on it

the problem occurs when i re-click on the button the calculation remains the same, It is supposed to go back to zero as in there is nothing in the cart

how do i get it to calculate until zero?

here is the model of my calculation:

$(document).ready(function() {
  $('.decimals').click(function() {
    $(this).toggleClass('active');
  });
});
$(".decimals").each(function(index) {
  $(this).attr("id", index);
});

let $th = $('#Table1 thead th');
// decalre Total value
window.totalcount = 0;
$(".decimals").on('click', e => {

  let $btn = $(e.target);
  let $option = $(`.box[data-id="${$btn.prop('id')}"]`);

  let $tr = $btn.closest('tr');
  let selectionIndex = $btn.closest('td').index();

  let match = $tr.find('td:first').text().trim();
  let result = $th.eq(selectionIndex).text().trim();
  let value = $btn.val();

  if ($option.length) {
    $option.remove();
    return;

  }
  $("#box").append(`<div class="box" data-id="${$btn.prop('id')}">${match}<br>${result}<div class="crtTotal">${value}</div></div>`);

});

/// The script below calculates the total odds and payout

$(document).click(function() {

  let values = $('.crtTotal').map((i, el) => parseFloat(el.textContent)).get();
  let total = values.reduce((a, b) => a * b);
  let eq = 0
  let tot = eq += total


  $('#ct1').text(tot.toFixed(2)).val()


  var z = 0

  var x = parseFloat($('#ct1').text() ?? 0);

  var y = parseFloat($('#stake').val() ?? 0);

  var net = z + x * y

  $("#payout").text(net.toFixed(2)).val()

})

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bet Plus 24/7</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>

<body style="margin:10px;">
  <div class="cart">
    <div class="title">Bet Slip</div>
    <div id="box" class="boxlit"></div>
    <br>

    <div>Total Odds: <b id="ct1"></b></div>
    <br>

    <div>(N$)Stake: <input id="stake" type="number" value="5"></input><span> NAD</span></div>

    <br>

    <div>Payout: <b id="payout"></b></div>


    <div class="footer"></div>

  </div>

  <br>

  <table id="Table1" class="Fixtures-Table">

    <tbody>

      <tr>
        <th>AFF U19 Championship Group Stage
          <td id="label">1
            <td id="label">x
              <td id="label">2</th>
      </tr>
      <tr>

        <td class="addItem">Myanmar U19 - Vietnam U19</td>
        <td><input type="button" class="decimals" id="" value="9.00" /></td>
        <td class="label">7/8/2022 10:00</td>

      </tr>

    </tbody>


  </table>




</body>

</html>

Answer

To find out where is the problem you should look into browser dev console. There you might notice that you are getting a similar error, when you click on 9.00 button second time:

Uncaught TypeError: Reduce of empty array with no initial value

And what it actually means is that you can not do a values.reduce when your values are empty.

let total = values.reduce((a, b) => a * b);

How you can fix it ?

For example, you can add an additional check in your code that checks if values are empty then consider total to be 0.

let total = values.length > 0
    ? values.reduce((a, b) => a * b)
    : 0;

Or you can still using reduce, but then provide a second parameter (initial value) to reduce function:

let total = values.reduce((a, b) => a * b, values.length > 0 ? 1 : 0);

Advertisement

Answer