JavaScript中输入htPrice时ttcPrice显示NaN的问题修复方法

问题定位 #

这段计算逻辑共有4处明确问题，直接导致NaN异常：

• 变量引用错误：定义的不含税价、税率变量名是htPrice、tvaPercent，计算含税价时却用了从未声明的preTaxPrice、vatPercent，两个未定义值相加结果为NaN，转换后依然是NaN
• 计算公式错误：含税价正确逻辑为「不含税金额 * (1 + 税率)」，如果税率输入框存的是百分比数值（比如输入13代表13%税率），还需要先把税率除以100转成计算用小数，原有逻辑直接对两个值做加法，就算变量名正确计算结果也不符合业务要求
• 异常判断逻辑错误：现有判断只有当htPrice和tvaPercent同时为NaN时才提示错误，只要其中一个值是无效数字，计算结果依然是NaN，会直接赋值给输入框
• 冗余转换：两个入参已经通过parseFloat转为数值类型，计算完成后不需要再套一层parseFloat做重复转换

修复方案 #

直接替换原有calculatTTC方法即可，修复后会先校验两个输入值有效性，再按正确公式计算：

calculatTTC() {
    // 读取输入值并转为浮点数
    const htPrice = parseFloat(this.htpriceTargets[0].value);
    const tvaInput = parseFloat(this.tvaTargets[0].value);
    
    // 任意输入值不是有效数字时提示错误
    if (isNaN(htPrice) || isNaN(tvaInput)) {
        this.ttcPriceTargets[0].value = 'the value is not correct';
        return;
    }
    // 税率转为计算用小数格式：如果输入13代表13%则保留/100，如果输入框本身要求填0.13这类小数就删掉/100
    const tvaPercent = tvaInput / 100;
    // 按价税公式计算，保留2位小数适配金额场景
    const ttcPrice = (htPrice * (1 + tvaPercent)).toFixed(2);
    this.ttcPriceTargets[0].value = ttcPrice;
}

提示：如果业务允许税率为0的免税场景，现有逻辑可以直接支持，不需要额外调整。

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