JavaScript多输入框求和时输入为空无法按0计算该如何解决

• 空输入框的value属性为空字符串，parseFloat()处理空字符串时会返回NaN（非数值）
• JavaScript 中任意数值和NaN做数学运算，最终结果都会变成NaN，这就导致只要有一个输入框为空，整个计算逻辑都会失效，无法将空值默认当做0参与计算。

在所有parseFloat()运算的位置添加兜底逻辑，当解析结果为NaN时默认取0参与计算，修改后的完整calcularCosts函数如下：

function calcularCosts(){
    var change_type1 = document.getElementById('change_type1').value;
    var cost_lab = document.getElementById('cost_lab').value;
    // 每个parseFloat结果兜底0
    var cost_labARS = (parseFloat(change_type1) || 0) * (parseFloat(cost_lab) || 0);
    document.getElementById('cost_labARS').value = cost_labARS;

    var change_type2 = document.getElementById('change_type2').value;
    var cost_lab2 = document.getElementById('cost_lab2').value;
    var cost_lab2ARS = (parseFloat(change_type2) || 0) * (parseFloat(cost_lab2) || 0);
    document.getElementById('cost_lab2ARS').value = cost_lab2ARS;

    var change_type3 = document.getElementById('change_type3').value;
    var cost_lab3 = document.getElementById('cost_lab3').value;
    var cost_lab3ARS = (parseFloat(change_type3) || 0) * (parseFloat(cost_lab3) || 0);
    document.getElementById('cost_lab3ARS').value = cost_lab3ARS;

    cost_obra = (parseFloat(cost_lab) || 0) + (parseFloat(cost_lab2) || 0) + (parseFloat(cost_lab3) || 0);
    document.getElementById('cost_obra').value = cost_obra;

    cost_obraARS = (parseFloat(cost_labARS) || 0) + (parseFloat(cost_lab2ARS) || 0) + (parseFloat(cost_lab3ARS) || 0);
    document.getElementById('cost_obraARS').value = cost_obraARS;
}

修改后无论输入框是否为空，都会正常计算，空值自动按0处理。

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