javascript - 使用 parseFloat 将用户输入作为在 JavaScript 中加在一起的字符串返回

Question

我正在编写一个预算计算器，我遇到的问题是解析用户输入。出于测试目的，我使用的是 parseInt() 并且可以很好地添加总数，但是更改为 parseFloat() 会自动填充“总计”表单，并将用户输入作为字符串添加在一起。 isNaN 的 if 语句中注释掉的行是我之前尝试过的，并且两者都简单地返回 LiquidTotal，因为字符串加在一起。

我想要的是允许多个数字用户输入，例如 10 和 10.50，并且总计显示为 $20.50，但现在它显示为 $1010.50

var LiquidTotal;

function LiquidMath()
        {
            var a = document.getElementById("cash").value;
            var b = document.getElementById("checkings").value;
            var c = document.getElementById("savings").value;
            var d = document.getElementById("market").value;
            var e = document.getElementById("LCD").value;
            var f = document.getElementById("LiquidOther1").value;
            var g = document.getElementById("LiquidOther2").value;
            var h = document.getElementById("LiquidOther3").value;

            parseFloat(a).toFixed(2);
            parseFloat(b).toFixed(2);
            parseFloat(c).toFixed(2);
            parseFloat(d).toFixed(2);
            parseFloat(e).toFixed(2);
            parseFloat(f).toFixed(2);
            parseFloat(g).toFixed(2);
            parseFloat(h).toFixed(2);

            LiquidTotal = a + b + c + d + e + f + g + h;

            if (isNaN(LiquidTotal))
            {
                return false;
            }
            else
            {
                //document.getElementById("DisplayLiquidTotal").value = LiquidTotal;
                document.getElementById("DisplayLiquidTotal").value = '$' + parseFloat(LiquidTotal).toFixed(2);
            }

            return document.getElementById("LiquidTotal").value;
        }

这是我的这个字段的 HTML，以防我也搞砸了那里的任何东西。

<h4>Liquid Assets</h4>
   <div class="row" style="padding:1px;">
      <div class="col-xs-8">Cash On Hand: <input type="text" id="cash" onblur="LiquidMath()" class="form-control" maxlength="30" style="background-color: #FFFFE0;"/></div>
      <div class="col-xs-8">Checking Account: <input type="text" id="checkings" onblur="LiquidMath()" class="form-control" maxlength="30" style="background-color: #FFFFE0;"/></div>
      <div class="col-xs-8">Savings Account: <input type="text" id="savings" onblur="LiquidMath()" class="form-control" maxlength="30" style="background-color: #FFFFE0;"/></div>
      <div class="col-xs-8">Money Market Fund: <input type="text" id="market" onblur="LiquidMath()" class="form-control" maxlength="30" style="background-color: #FFFFE0;"/></div>
      <div class="col-xs-8">CD Less Than One Year: <input type="text" id="LCD" onblur="LiquidMath()" class="form-control" maxlength="30" style="background-color: #FFFFE0;"/></div>
      <div class="col-xs-8">Other: <input type="number" id="LiquidOther1" onblur="LiquidMath()" class="form-control" maxlength="30" style="background-color: #FFFFE0;"/></div>
      <div class="col-xs-8">Other: <input type="number" id="LiquidOther2" onblur="LiquidMath()" class="form-control" maxlength="30" style="background-color: #FFFFE0;"/></div>
      <div class="col-xs-8">Other: <input type="number" id="LiquidOther3" onblur="LiquidMath()" class="form-control" maxlength="30" style="background-color: #FFFFE0;"/></div>
      <div class="col-xs-8">Total: <input type="text" id="DisplayLiquidTotal" onblur="LiquidMath()" readonly="readonly" class="form-control" maxlength="30" style="background-color: #FFFFE0;"/></div>

Answer 1

你有多个问题。

1. parseFloat 和 toFixed 都返回新值，它们不会改变输入。
2. parseFloat 返回一个 float ，toFixed 转换数字类型并返回一个字符串。所以如果你保持 toFixed，你仍然会有一个字符串。

字符串不通过算术相加，Javascript中的字符串相加导致拼接。

如果要将数字相加，需要给parseFloat的返回值赋值，停止使用toFixed。