如何使用 Javascript 将不同输入的值相乘以获得总数?
How do I multiply values from different inputs to get a total using Javascript?
我正在尝试做一个购物车,我希望总计在输入数量后自动改变(总计是价格乘以数量)。我正在尝试为此使用 Javascript 但我似乎无法理解它,因为它出现了 null 并且在它说 NaN 之前。
PS: 目前这是一个控制台日志,只是为了看看它是否有效,但我需要它进入总输入标签。
HTML:
<input id="price" type="text" readonly value=".95">
<input id="quantity" type="text" value="1" onchange="calcTotal()">
<input id="total" type="text" readonly value=".95">
JavaScript:
function calcTotal() {
var price = document.getElementById("price").value;
var quantity = document.getElementById("quantity").value;
var total = price * quantity;
console.log(total);
}
试试这个:
function calcTotal() {
// remove $ sign and parse Float price
var price = parseFloat(document.getElementById("price").value.substr(1));
// parse float quantity
var quantity = parseFloat(document.getElementById("quantity").value);
var total = price * quantity;
//pass calculated value to input with id total
document.getElementById("total").value = "$" + total;
}
<input id="price" type="text" readonly value=".95">
<input id="quantity" type="text" value="1" onchange="calcTotal()">
<input id="total" type="text" readonly value="">
任何涉及字符串 returns NaN
的操作,但是您应该
将您的输入值强制为 Number
function calcTotal() {
var price = document.getElementById("price").value;
var quantity = document.getElementById("quantity").value;
var total =Number(price) * Number(quantity);
console.log(total);
}
使用 Number
与 parseFloat
所以只要你有标准的数字输入,就没有区别。但是,如果您的输入以数字开头然后包含其他字符,则 parseFloat 会截断字符串中的数字,而 Number 会给出 NaN(不是数字):
parseFloat('1x'); // => 1
Number('1x'); // => NaN
我正在尝试做一个购物车,我希望总计在输入数量后自动改变(总计是价格乘以数量)。我正在尝试为此使用 Javascript 但我似乎无法理解它,因为它出现了 null 并且在它说 NaN 之前。
PS: 目前这是一个控制台日志,只是为了看看它是否有效,但我需要它进入总输入标签。
HTML:
<input id="price" type="text" readonly value=".95">
<input id="quantity" type="text" value="1" onchange="calcTotal()">
<input id="total" type="text" readonly value=".95">
JavaScript:
function calcTotal() {
var price = document.getElementById("price").value;
var quantity = document.getElementById("quantity").value;
var total = price * quantity;
console.log(total);
}
试试这个:
function calcTotal() {
// remove $ sign and parse Float price
var price = parseFloat(document.getElementById("price").value.substr(1));
// parse float quantity
var quantity = parseFloat(document.getElementById("quantity").value);
var total = price * quantity;
//pass calculated value to input with id total
document.getElementById("total").value = "$" + total;
}
<input id="price" type="text" readonly value=".95">
<input id="quantity" type="text" value="1" onchange="calcTotal()">
<input id="total" type="text" readonly value="">
任何涉及字符串 returns NaN
的操作,但是您应该
将您的输入值强制为 Number
function calcTotal() {
var price = document.getElementById("price").value;
var quantity = document.getElementById("quantity").value;
var total =Number(price) * Number(quantity);
console.log(total);
}
使用 Number
与 parseFloat
所以只要你有标准的数字输入,就没有区别。但是,如果您的输入以数字开头然后包含其他字符,则 parseFloat 会截断字符串中的数字,而 Number 会给出 NaN(不是数字):
parseFloat('1x'); // => 1
Number('1x'); // => NaN