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: $516
Savings: $316

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的STRING值附加到先前数学语句的INTEGER值。这就是为什么你的数字看起来像“316200”，因为你实际上是附加“316”和“200”，而不是像你想要的那样添加两个。

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

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