Why can't I calculate percentage discount from this HTML table in JS?

September 14, 2022

As a beginner, I’ve been trying to get this to 01) generate the discount value; 02) Calculate the resulting value, as the user informs the percentage, but it gives me number as type, then NaN right after it.

function grand_total(el) {
  let grandTotal = 0;
  let termsTotal = 0;
  let dollarUS = Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
  });


  if (el) {
    let total = 0;
    total += parseFloat(document.getElementById('totalValue').innerText);
    console.log('Type Total: ' + typeof total);

    console.log(total);

    let percentage = 0;
    percentage += parseInt(el.value);
    console.log('Percentage: ' + JSON.stringify(percentage))
    console.log('Percentage Type:  ' + typeof percentage)

    if (percentage > 0) {
      termsTotal = (percentage / 100) * total;
      grandTotal = total - termsTotal;
    }

    console.log('Terms Total: ' + JSON.stringify(termsTotal))
    console.log('Grand Total: ' + JSON.stringify(grandTotal))
    document.getElementById('termsTotal').innerText = termsTotal
    document.getElementById('grandTotal').innerText = grandTotal
  }
}

<table class="table table-hover table-vcenter" id="dtable">
  <tr>
    <td id="totalTitle" colspan="10" align="right"><strong>Total:</strong></td>
    <td id="totalValue" class="total">$7.75</td>
  </tr>
  <tr>
    <td id="termsRow" colspan="9" align="right"><strong>Deposit(%):</strong></td>
    <td><input type="number" min="0" class="terms" name="numberInputs" value="30" onchange="grand_total(this)"></td>
    <td id="termsTotal" class="terms_total">NaN</td>
  </tr>
  <tr>
    <td id="grandTotalRow" colspan="10" align="right"><strong>Grand Total:</strong></td>
    <td id="grandTotal" class="grand_total">NaN</td>
  </tr>
</table>

Apperciate any help.

>Solution :

You need to strip the dollar sign out of the text you are trying to convert to a number first. You can do that with Number(document.getElementById('totalValue').innerText.replace(/[^0-9.-]+/g,''));

function grand_total(el) {
  let grandTotal = 0;
  let termsTotal = 0;
  let dollarUS = Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
  });

  if (el) {
    let totalValue = Number(document.getElementById('totalValue').innerText.replace(/[^0-9.-]+/g,''));
    let total = 0;
    total += parseFloat(totalValue);
    console.log('Type Total: ' + typeof total);

    console.log(total);

    let percentage = 0;
    percentage += parseInt(el.value);
    console.log('Percentage: ' + JSON.stringify(percentage))
    console.log('Percentage Type:  ' + typeof percentage)

    if (percentage > 0) {
      termsTotal = (percentage / 100) * total;
      grandTotal = total - termsTotal;
    }
    console.log('Terms Total: ' + JSON.stringify(termsTotal))
    console.log('Grand Total: ' + JSON.stringify(grandTotal))
    document.getElementById('termsTotal').innerHTML = termsTotal
    document.getElementById('grandTotal').innerHTML = grandTotal
  }
}

document.querySelector('.terms').addEventListener('change',function(){
  grand_total(this);
});

<table>
  <tr>
    <td id="totalValue" class="total">$17.75</td>
    <td><input type="number" min="0" class="terms" name="numberInputs" value="30" /></td>
    <td id="termsTotal" class="terms_total"><strong></strong></td>
    <td id="grandTotal" class="grand_total"><strong></strong></td>
  </tr>
</table>