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

Question

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
  }
}


  
    Total:
    $7.75
  
  
    Deposit(%):
    
    NaN
  
  
    Grand Total:
    NaN

Apperciate any help.

user19103974 · Answer

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);
});


  
    $17.75

Scario Eva · Answer

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;
    }
  }

17.75

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

2 Answers