时间戳

首页 > 解决方案 > 使用 parseFloat 将用户输入作为在 JavaScript 中添加在一起的字符串返回

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

问题描述

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

标签： javascripthtml

解决方案

你有多个问题。

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

字符串不是用算术添加的，在 Javascript 中添加字符串会导致连接。

如果要将数字相加，则需要分配 parseFloat 的返回值并停止使用 toFixed。

推荐阅读