点击移除字段后总金额显示负号：金额计算异常排查

问题描述 #

点击移除字段后，金额虽有减少，但总金额显示为带负号的剩余金额，截图显示移除字段后总金额带负号。

提供的代码 #

移除字段并尝试扣除金额的函数：

function removeHtmlRow(nxt){ 
    $("#FD"+nxt).remove(); 
    var totAmtR = 0; 
    $('input.price').each(function (index, cvalue) { 
        if(cvalue.value != '' && cvalue.value > 0){ 
            totAmtR -= parseFloat(cvalue.value); 
        } 
    }); 
    alert(totAmtR); 
    $("#totalAmount").val(parseFloat(totAmtR)); 
}

计算总计金额的函数：

function calTotalAmount(){ 
    var totAmt = 0; 
    $('input.price').each(function (index, cvalue) { 
        if(cvalue.value != '' && cvalue.value > 0){ 
            totAmt += parseFloat(cvalue.value); 
        } 
    }); 
    $("#totalAmount").val(parseFloat(totAmt)); 
}

问题原因 #

你看removeHtmlRow函数里的计算逻辑明显出错啦！totAmtR初始值是0，结果你用减法去遍历剩下的价格字段——比如剩下的所有价格加起来是200，那0-200就得到-200，总金额自然就变成负数了。而你已经写了正确的calTotalAmount函数，它是用加法累加所有有效价格，完全可以直接复用这个逻辑。

修复方案 #

方案1：直接复用已有的正确计算函数（推荐）

既然已经有了calTotalAmount这个经过验证的总计计算函数，移除字段后直接调用它就行，不用重复写计算逻辑，还能减少出错概率：

function removeHtmlRow(nxt){ 
    $("#FD"+nxt).remove(); 
    // 直接调用正确的总计计算函数
    calTotalAmount(); 
}

方案2：修正removeHtmlRow里的计算逻辑

如果你不想复用函数，那把里面的减法改成加法就行，和calTotalAmount保持一致的计算逻辑：

function removeHtmlRow(nxt){ 
    $("#FD"+nxt).remove(); 
    var totAmtR = 0; 
    $('input.price').each(function (index, cvalue) { 
        if(cvalue.value != '' && cvalue.value > 0){ 
            // 把 -= 改成 +=
            totAmtR += parseFloat(cvalue.value); 
        } 
    }); 
    alert(totAmtR); 
    $("#totalAmount").val(parseFloat(totAmtR)); 
}

这样修改之后，移除字段后总金额就会正确显示剩余的正数总和啦！

内容的提问来源于stack exchange，提问作者S.A.