Javascript 中的计算器表格返回错误数字

Question

尝试在 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: 6
Savings: 6

Answer 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 的字符串值附加到前面数学语句的整数值。这就是为什么您的数字看起来像“316200”，因为您实际上是附加了“316”和“200”，而不是像您打算的那样将两者相加。

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

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

Javascript 中的计算器表格返回错误数字

Calculator Form in Javascript Returning Wrong Numbers

javascript

forms

calculator