How to format cash after 2 calculations Javascirpt

Question

I use Javascript to calculate the product price. After selecting the product to calculate the result of the first product I used tolocalString() to format the result was successful. However, when choosing the second product to enter the same data, the totalcash box is displayed NaN.

It seems that is history after using toLocaleString() it can't be calculated this is my code

function sanpham1() {

  if (document.getElementById("ProductHGuard").checked) {
    var numberProduct = document.getElementById("numberProductHGuard").value;
    var priceproduct2 = document.getElementById("priceProductDIAsia").value;

    var result = numberProduct * 37500;
    var newresult = result.tolocalString();
    var tonggia = (priceproduct2 * 1.1) + (result * 1.1);
    var piceProduct1 = numberProduct * 25;
    var tonggiamoi = parseInt(tonggia);


    document.getElementById('priceProductHGuard').value = newresult.();
    document.getElementById('sumprice').value = tonggiamoi.toLocaleString();
    document.getElementById('numberProductHGuard1').value = piceProduct1;

  }
}

function sanpham2() {
  var numberProduct = document.getElementById("numberProductDIAsia").value;
  var priceproduct1 = document.getElementById("priceProductHGuard").value;

  if (document.getElementById("ProductDIAsia").checked) {
    var result = numberProduct * 23000;
    var tonggia = (priceproduct1 * 1.1) + (result * 1.1);
    var piceProduct2 = numberProduct * 20;
    var tonggiamoi = tonggia;

    document.getElementById('priceProductDIAsia').value = result.toLocaleString();
    document.getElementById('sumprice').value = tonggiamoi.toLocaleString();
    document.getElementById('numberProductDIAsia2').value = piceProduct2;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<table class="table table-borderless" style="border:1px solid gray;">
  <thead>
    <tr>
      <th style="border:1px solid gray;" scope="col" colspan="2">Product</th>
      <th style="border:1px solid gray;" scope="col">Price</th>
      <th style="border:1px solid gray;" scope="col">Box</th>
      <th style="border:1px solid gray;" scope="col">Pice</th>
      <th style="border:1px solid gray;" scope="col"></th>

    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" style="border:1px solid gray;"> <input class="form-check-input" type="checkbox" name="ProductHGuard" id="ProductHGuard"></th>
      <td style="border:1px solid gray;">product1</td>
      <td style="border:1px solid gray;">37,500円/箱</td>
      <td style="border:1px solid gray;"> <input class="form-control" type="text" name="numberProductHGuard" id="numberProductHGuard" placeholder="2~" onchange="sanpham1()" disabled></td>
      <td style="border:1px solid gray;"><input class="form-control" type="text" name="numberProductHGuard1" id="numberProductHGuard1" disabled value="0"></td>
      <td style="border:1px solid gray;"><input class="form-control" type="text" name="priceProductHGuard" id="priceProductHGuard" value="0"></td>
    </tr>
    <script>
      $('#ProductHGuard').change(function() {


        if ($('#ProductHGuard').is(':checked') == true) {
          $('#numberProductHGuard').prop('disabled', false);
          $('#numberProductHGuard1').prop('disabled', false);


        } else {
          $('#numberProductHGuard').val('').prop('disabled', true);
          $('#numberProductHGuard1').prop('disabled', true);
          $('#numberProductHGuard1').val('');
          $('#priceProductHGuard').val('');
          $('#sumprice').val('');


        }

      });
    </script>
    <tr>
      <th style="border:1px solid gray;" scope="row"><input class="form-check-input" type="checkbox" name="ProductDIAsia" id="ProductDIAsia" value=""></th>
      <td style="border:1px solid gray;">Product2</td>
      <td>23,000円/箱</td>
      <td style="border:1px solid gray;"> <input class="form-control" type="text" name="numberProductDIAsia" id="numberProductDIAsia" placeholder="2~" onchange="sanpham2()" disabled></td>
      <td style="border:1px solid gray;"> <input class="form-control" type="text" name="numberProductDIAsia2" id="numberProductDIAsia2" value="0" disabled></td>
      <td style="border:1px solid gray;"><input class="form-control" type="text" name="priceProductDIAsia" id="priceProductDIAsia" value="0"></td>
    </tr>
    <script>
      $('#ProductDIAsia').change(function() {


        if ($('#ProductDIAsia').is(':checked') == true) {
          $('#numberProductDIAsia').prop('disabled', false);
          $('#numberProductDIAsia2').prop('disabled', false);

        } else {
          $('#numberProductDIAsia').val('').prop('disabled', true);
          $('#numberProductDIAsia2').val('').prop('disabled', true);

          $('#priceProductDIAsia').val('');
          $('#sumprice').val('');


        }

      });
    </script>
    <tr>
      <td colspan="5" style="border:1px solid gray;">消費税</td>
      <td style="border:1px solid gray;">
        <p>10% <span style="font-weight:bold">自動計算結果の表示</span></p>
      </td>
    </tr>
    <tr>
      <td colspan="5">合計</td>
      <td>
        <div class="input-group mb-3">
          <input type="text" class="form-control" id="sumprice" name="sumprice" pattern="^\$\d{1,3}(,\d{3})*(\.\d+)?$" value="" data-type="currency">
          <span class="input-group-text" id="basic-addon1">円</span>
        </div>


      </td>
    </tr>
  </tbody>
</table>

Answer 1

In your first function, you are not calling the intended method to get the string. Your code:

var newresult = result.tolocalString();

It should be:

var newresult = result.toLocaleString();