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

您有多个问题。

parseFloat和toFixed都返回新值，它们不会改变输入。
虽然parseFloat返回浮点数，但toFixed会转换数字类型并返回字符串。因此，如果继续固定，您将仍然拥有一个字符串。

字符串不是通过算术添加的，在Javascript中添加字符串会导致串联。

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

Answer 2

您遇到的问题是parseFloat返回一个值。它不会改变适当的值。

这就是您想要的：

a = parseFloat(a).toFixed(2);
b = parseFloat(b).toFixed(2);

...等等。

Answer 3

如其他答案所述，您的根本问题在于parseFloat不会更改传递的变量。

在我看来，当您假定要显示总和的结果时，您实际上只需要在末尾做正确的事，就好像您也对小数点后一位舍入。我还建议通过将重复的行为封装到辅助函数中来整理事情，例如：

// Get an element by ID and convert it to a float
const getFloatById = element => {
  return parseFloat(document.getElementById(element));
}

const elementsToSum = ['cash', 'checkings', 'savings', 'market', 'LCD', 'LiquidOther1', 'LiquidOther2', 'LiquidOther3'];

// Iterate over the list of element names
LiquidTotal = elementsToSum.map(el => getFloatById(el))
  // use reduce to sum all elements
  .reduce((accum, current) => {
    return accum + current
  }, 0)
  // then convert to a 2 decimal place string
  .toFixed(2);

使用parseFloat将用户输入作为字符串添加到JavaScript中

3 个答案: