Расчет не работает при значении с запятой

Question

Используется ниже HTML и JS для расчета общего значения на основе приращения / убывания. Он отлично работает, если значение без запятой. 6300, 1200. Когда мы добавляем запятую, например, 6,300 или 1,200. Метод расчета ниже не работает.

Надеюсь, я пропустил logi c для расчета с запятой .. не уверен, какой из них пропустил.

let noofpaxinput = $('#txtnoofpax');
let intialvalue = 5;

let totalAmountValue = $('.grand-total .amount').html();
$('.noofpax').click(function(){
   let packageamount = parseInt($('.package-amount .amount').html());
   let perpersonamount = parseInt($('.per-person-cost').html());
   let totalAmount = $('.grand-total .amount');
   var txtnoofpaxValue = $(noofpaxinput).val();
   if ($(this).hasClass('increasepax')){
     $(noofpaxinput).val(parseInt(txtnoofpaxValue)+1);
     $('.decreasepax').prop('disabled', false);
     let getTotalnoofpax = parseInt($('#txtnoofpax').val());
     let getDifferenceTotal = parseInt(getTotalnoofpax - intialvalue);
     let perpersonamountTotal = perpersonamount * getDifferenceTotal;
     let grandTotalAmount = parseInt(packageamount) + parseInt(perpersonamountTotal);
     $('.perperson-amount .amount').html(perpersonamountTotal);
     totalAmount.html(grandTotalAmount);
   } else if ($(this).hasClass('decreasepax')){
     if ((txtnoofpaxValue - 1) == intialvalue) {
       $('.decreasepax').prop('disabled', true);
       $(noofpaxinput).val(parseInt(parseInt(txtnoofpaxValue)-1));
     } else {
       $(noofpaxinput).val(parseInt(parseInt(txtnoofpaxValue)-1));
       let getTotalnoofpax = parseInt($('#txtnoofpax').val());
       let getDifferenceTotal = parseInt(getTotalnoofpax - intialvalue);
       let perpersonamountTotal = perpersonamount * getDifferenceTotal;
       let grandTotalAmount = parseInt(packageamount) + parseInt(perpersonamountTotal);
       $('.perperson-amount .amount').html(perpersonamountTotal);
       totalAmount.html(grandTotalAmount);
     }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button-wrapper">
   <button type="button" disabled="disabled" class="noofpax decreasepax">-</button> 
   <input id="txtnoofpax" type="text" value="5"> 
   <button type="button" class="noofpax increasepax">+</button>
</div>

<div class="package-amount"><span>$</span><span class="amount">6,300</span></div>
<div class="fee-info--amount">
   <div class="fee-info">
      <div class="info">Every pax cost $<span class="per-person-cost">1,200</span></div>
   </div> 
   <div class="fee-amount">
      <div class="perperson-amount">
         <span>$</span><span class="amount">0</span>
      </div>
   </div>
</div>
<div class="grand-total">
   <p>Total Payable Amount</p>
   <div class="fee-amount"><span>$</span><span class="amount">6,300</span></div>
</div>

Answer 1

Вы можете использовать:

• .replace(/,/g, '') для удаления запятой перед синтаксическим анализом
• .toLocaleString() для печати числа с запятой после вычисления

let packageamount = parseInt($('.package-amount .amount').html().replace(/,/g, ''));
// ...
totalAmount.html(grandTotalAmount.toLocaleString());

let noofpaxinput = $('#txtnoofpax');
let intialvalue = 5;

let totalAmountValue = $('.grand-total .amount').html();
$('.noofpax').click(function(){
   let packageamount = parseInt($('.package-amount .amount').html().replace(/,/g, ''));
   let perpersonamount = parseInt($('.per-person-cost').html().replace(/,/g, ''));
   let totalAmount = $('.grand-total .amount');
   var txtnoofpaxValue = $(noofpaxinput).val();
   if ($(this).hasClass('increasepax')){
     $(noofpaxinput).val(parseInt(txtnoofpaxValue)+1);
     $('.decreasepax').prop('disabled', false);
     let getTotalnoofpax = parseInt($('#txtnoofpax').val());
     let getDifferenceTotal = parseInt(getTotalnoofpax - intialvalue);
     let perpersonamountTotal = perpersonamount * getDifferenceTotal;
     let grandTotalAmount = parseInt(packageamount) + parseInt(perpersonamountTotal);
     $('.perperson-amount .amount').html(perpersonamountTotal.toLocaleString());
     totalAmount.html(grandTotalAmount.toLocaleString());
   } else if ($(this).hasClass('decreasepax')){
     if ((txtnoofpaxValue - 1) == intialvalue) {
       $('.decreasepax').prop('disabled', true);
       $(noofpaxinput).val(parseInt(parseInt(txtnoofpaxValue)-1));
     } else {
       $(noofpaxinput).val(parseInt(parseInt(txtnoofpaxValue)-1));
       let getTotalnoofpax = parseInt($('#txtnoofpax').val());
       let getDifferenceTotal = parseInt(getTotalnoofpax - intialvalue);
       let perpersonamountTotal = perpersonamount * getDifferenceTotal;
       let grandTotalAmount = parseInt(packageamount) + parseInt(perpersonamountTotal);
       $('.perperson-amount .amount').html(perpersonamountTotal.toLocaleString());
       totalAmount.html(grandTotalAmount.toLocaleString());
     }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button-wrapper">
   <button type="button" disabled="disabled" class="noofpax decreasepax">-</button> 
   <input id="txtnoofpax" type="text" value="5"> 
   <button type="button" class="noofpax increasepax">+</button>
</div>

<div class="package-amount"><span>$</span><span class="amount">6,300</span></div>
<div class="fee-info--amount">
   <div class="fee-info">
      <div class="info">Every pax cost $<span class="per-person-cost">1,200</span></div>
   </div> 
   <div class="fee-amount">
      <div class="perperson-amount">
         <span>$</span><span class="amount">0</span>
      </div>
   </div>
</div>
<div class="grand-total">
   <p>Total Payable Amount</p>
   <div class="fee-amount"><span>$</span><span class="amount">6,300</span></div>
</div>

Answer 2

Вы можете просто использовать функцию replace , чтобы удалить , запятую с пустыми символами. Ваши расчеты будут идеальными. Кроме того, я бы повторно использовал c -emend, используя .text() not .html

Когда вы используете parseInt на text или html, и он имеет запятые это примет первое значение (символ), которое будет 1 в 1200 и 6 в 6300.

Если вы думаете об отображении Total или Grand Total с добавленными запятыми, просто используйте toLocaleString для отображения числа с добавленными запятыми.

Demo

let noofpaxinput = $('#txtnoofpax');
let intialvalue = 5;

let totalAmountValue = $('.grand-total .amount').html();

$('.noofpax').click(function() {
  let packageamount = $('.package-amount .amount').text().replace(',', '');
  let perpersonamount = $('.per-person-cost').text().replace(',', '');
  let totalAmount = $('.grand-total .amount');
  var txtnoofpaxValue = $(noofpaxinput).val();
  if ($(this).hasClass('increasepax')) {
    $(noofpaxinput).val(parseInt(txtnoofpaxValue) + 1);
    $('.decreasepax').prop('disabled', false);
    let getTotalnoofpax = parseInt($('#txtnoofpax').val());
    let getDifferenceTotal = parseInt(getTotalnoofpax - intialvalue);
    let perpersonamountTotal = perpersonamount * getDifferenceTotal;
    let grandTotalAmount = parseInt(packageamount) + parseInt(perpersonamountTotal);
    $('.perperson-amount .amount').html(perpersonamountTotal.toLocaleString());
    totalAmount.html(grandTotalAmount.toLocaleString());
  } else if ($(this).hasClass('decreasepax')) {
    if ((txtnoofpaxValue - 1) == intialvalue) {
      $('.decreasepax').prop('disabled', true);
      $(noofpaxinput).val(parseInt(parseInt(txtnoofpaxValue) - 1));
    } else {
      $(noofpaxinput).val(parseInt(parseInt(txtnoofpaxValue) - 1));
      let getTotalnoofpax = parseInt($('#txtnoofpax').val());
      let getDifferenceTotal = parseInt(getTotalnoofpax - intialvalue);
      let perpersonamountTotal = perpersonamount * getDifferenceTotal;
      let grandTotalAmount = parseInt(packageamount) + parseInt(perpersonamountTotal);
      $('.perperson-amount .amount').html(perpersonamountTotal);
      totalAmount.html(grandTotalAmount.toLocaleString());
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button-wrapper">
  <button type="button" disabled="disabled" class="noofpax decreasepax">-</button>
  <input id="txtnoofpax" type="text" value="5">
  <button type="button" class="noofpax increasepax">+</button>
</div>

<div class="package-amount"><span>$</span><span class="amount">6,300</span></div>
<div class="fee-info--amount">
  <div class="fee-info">
    <div class="info">Every pax cost $<span class="per-person-cost">1,200</span></div>
  </div>
  <div class="fee-amount">
    <div class="perperson-amount">
      <span>$</span><span class="amount">0</span>
    </div>
  </div>
</div>
<div class="grand-total">
  <p>Total Payable Amount</p>
  <div class="fee-amount"><span>$</span><span class="amount">6,300</span></div>
</div>