我有案例,我不知道如何解释: 我的错误是,我打开代码,我写了一些值(例如: 你多少钱:100 你的服务怎么样:10 共享了多少人:2)在点击Calculate之前我打开控制台。如果我写:
>bill.value
<"100"
我按预期得到了一个字符串。但后来我点击计算,我得到的是:
100
5
为什么100?为什么它突然返回字符串的数字?
我怎样才能在最后用数学做数学。我转变成数字只是数字(bill.value)。服务和人员应该仍然是串?
var button = document.querySelector("button");
var tip = document.getElementById("tip");
var total;
button.addEventListener("click", function() {
var bill = document.querySelector("input");
console.log(bill.value)
var people = document.getElementById("people").value;
var service = document.getElementsByTagName("select")[0].value;
total = (service * Number(bill.value)) / people
tip.textContent = total;
console.log(total)
});
<h1>Tip Calculator</h1>
<div>How much was your bill?</div>
<label for="bill">$</label>
<input type="number" id="bill">
<div>How was your service?</div>
<select>
<option disabled selected value="0">Choose</option>
<option value="0.30">30% - Outstanding</option>
<option value="0.20">20% - Good</option>
<option value="0.15">15% - It was okaya</option>
<option value="0.10">10% - Bad</option>
<option value="0.05">5% - Terible</option>
</select>
<div>How many people are sharing the bill?</div>
<label>
<input type="number" id="people">people</label>
<button>Calculate!</button>
<span id="tip"></span>
答案 0 :(得分:1)
编辑:现在了解你正在询问隐式转换,我已经更新了我的答案。
看看下面的代码,你会注意到product
包含一个数字值,而sum包含一个字符串。包含由+
运算符分隔的两个字符串的表达式将始终导致字符串的串联(最期望的)。
另一方面,*
运算符对两个字符串无效,因此它会尝试将字符串转换为支持*
运算符的值,即数字。如果两个字符串都是有效整数或浮点数,则结果是两个数字的乘积。如果没有,结果将是NaN。
var a = '2.0';
var b = '3.0';
var sum = a + b;
var product = a * b;
console.log(product); // 6.0
console.log(sum); // "2.03.0"