在JavaScript中，使用parseFloat将用户输入作为字符串相加返回
在JavaScript中，使用parseFloat将用户输入作为字符串相加返回
提问于 2018-10-20 02:59:39
我正在写一个预算计算器，我遇到的问题是解析用户输入。出于测试目的，我使用了parseInt()，这将很好地添加总数，但是更改为parseFloat()将自动填充"total“表单，并将用户输入作为字符串添加在一起。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>
回答 2
Stack Overflow用户
发布于 2018-10-20 03:02:46
您遇到的问题是parseFloat返回值。它不会改变原地的值。
这就是你想要的：
a = parseFloat(a).toFixed(2);
b = parseFloat(b).toFixed(2);..。诸若此类。
Stack Overflow用户
发布于 2018-10-20 03:17:01
正如其他答案所提到的，您的基本问题在于parseFloat没有改变传递给它的变量。
在我看来，你似乎也过于热衷于小数点后四舍五入，而我认为你只有在想要显示和的结果时，才真正需要这样做。我还建议通过将重复的行为封装到helper函数中来进行整理，比如：
// 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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52898450
复制相关文章
相似问题
腾讯云开发者
