为何无法通过JS从HTML表格计算百分比折扣？

作为JavaScript初学者，我试图实现以下两个功能：

• 生成折扣值
• 根据用户输入的百分比计算最终金额

但程序先返回number类型，随即出现NaN错误。相关代码如下：

原JS代码 #

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

原HTML代码 #

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

错误原因分析 #

核心问题是totalValue元素的文本包含美元符号$，parseFloat("$7.75")无法正确解析数字，会直接返回NaN，后续所有基于total的计算都会变成NaN。

解决方案 #

先去除金额字符串中的非数字字符（这里是$），再进行解析。同时优化页面初始化逻辑，避免加载时显示NaN，还可以用上你定义的货币格式化器统一输出格式。

修正后的JS代码 #

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

  if (el) {
    // 去除美元符号后再解析数字
    const totalText = document.getElementById('totalValue').innerText.replace(/\$/g, '');
    let total = parseFloat(totalText);
    
    // 处理百分比输入为空的情况，默认设为0
    let percentage = parseInt(el.value) || 0;

    if (percentage > 0) {
      termsTotal = (percentage / 100) * total;
      grandTotal = total - termsTotal;
    } else {
      // 百分比为0时，折扣为0，总价等于原价
      termsTotal = 0;
      grandTotal = total;
    }

    // 用货币格式化器输出统一格式的金额
    document.getElementById('termsTotal').innerText = dollarUS.format(termsTotal);
    document.getElementById('grandTotal').innerText = dollarUS.format(grandTotal);
  }
}

// 页面加载完成后自动初始化计算，避免显示NaN
window.addEventListener('load', function() {
  const inputEl = document.querySelector('input.terms');
  grand_total(inputEl);
});

关键优化点 #

• 使用replace(/\$/g, '')全局去除美元符号，确保parseFloat能正确解析数字
• 给percentage添加|| 0处理输入为空的情况，避免出现NaN
• 页面加载时自动调用计算函数，初始化显示正确金额
• 用上定义的dollarUS格式化器，让输出金额保持统一的货币格式

内容的提问来源于stack exchange，提问作者onit