Javascript 中的计算器表单返回错误的数字答案

【问题标题】：Calculator Form in Javascript Returning Wrong NumbersJavascript 中的计算器表单返回错误的数字
【发布时间】：2017-05-10 19:09:54
【问题描述】：

尝试用 Javascript 构建一个计算器，让人们计算出他们的通勤成本以及使用我公司的班车服务可以节省多少。由于某种原因，这些数字都是错误的，我不知道为什么。

<script>
function calc(){
    var miles=document.getElementById('miles').value;
    var tolls=document.getElementById('tolls').value;
    var days=document.getElementById('days').value;
    var parking=document.getElementById('parking').value;
    var cost= (tolls * days * 4) + (miles * days * 4 * 0.54) + parking;
    document.getElementById('cost').innerHTML=cost;
    var savings= cost - 200;
    document.getElementById('savings').innerHTML=savings;
    return false
}
</script>
<form>
<p>Miles Per Day You Commute <input type="text" id="miles"/></p>
<p>Days Per Week You Commute <input type="text" id="days" /></p>
<p>Tolls per Day <input type="text" id="tolls" /></p>
<p>Cost of Parking at Work <input type="text" onChange="calc()" id="parking" /></p>
<input type="button" onClick="calc()" value="Calculate" />
</form>
<p>Your Current Cost of Commuting: <div id="cost"></div> per month</p>
<p>Your Savings With Joule: <div id="savings"></div> per month</p>

作为参考，0.54 是指美国国税局建议的每英里 0.54 美元的报销率。 200 是指我的班车费用。

实际输出应该是：

Cost: $516
Savings: $316

【问题讨论】：

如果您可以发布您的输入并且您收到的输出不正确，这将有所帮助...
@War10ck 刚刚添加了
您的输入是文本类型。因此，在对它们的值进行数学运算之前，您需要将它们转换为数字： parseFloat(input.value)
@yBrodsky 我一定遗漏了一些东西，因为在输入所有数字时，它返回 NaN。
创建一个带有工作演示的 jsfiddle。否则无法帮助你

标签： javascript forms calculator

【解决方案1】：

问题在于 parking 是一个字符串，因为它直接来自文本字段，所以当您尝试进行 cost 计算时

//  cost= ( 5    *   5  * 4) + ( 20   *  5   * 4 * 0.54) +  "200"
//  cost= (      100       ) + (          216          ) +  "200"
//  cost= (316) + "200"
//  cost= "316200"  
var cost= (tolls * days * 4) + (miles * days * 4 * 0.54) + parking;

您将 parking 的 STRING 值附加到前面数学语句的 INTEGER 值。这就是为什么您的数字看起来像“316200”，因为您实际上是附加了“316”和“200”，而不是像您想要的那样添加两个。

您需要先将 parking 解析为 int，然后您的数学才能正常工作。或者，您可以将 parking 乘以 1 以将其转换为数字：

var cost= (tolls * days * 4) + (miles * days * 4 * 0.54) + (parking * 1);

【讨论】：