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

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

Apperciate any help.

CodePudding user response：

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" >$17.75</td>
    <td><input type="number" min="0"  name="numberInputs" value="30" /></td>
    <td id="termsTotal" ><strong></strong></td>
    <td id="grandTotal" ><strong></strong></td>
  </tr>
</table>

CodePudding user response：

First change td tag to span or div element as td is a part of table tag and remove "$"

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").innerHTML = termsTotal;
      document.getElementById("grandTotal").innerHTML = grandTotal;
    }
  }

<span id="totalValue" >17.75</span>
<input
  type="number"
  min="0"
  
  name="numberInputs"
  value="30"
  onchange="grand_total(this)"
/>
<br />
<span id="termsTotal" ><strong></strong></span>
<br />
<span id="grandTotal" ><strong></strong></span>