如何使用Javascript将不同的输入值相乘得到一个总数？

Question

我想做一个购物车，我想在输入数量后自动改变总数（总数是价格乘以数量）。我试图使用Javascript来实现这个功能，但我似乎无法实现，因为它出现的是null，而之前它说的是NaN。

PS：这是一个控制台的日志在目前只是为了看看它的工作，但我将需要它进入总输入标签。

HTML。

<input id="price" type="text" readonly value="$18.95">
<input id="quantity" type="text" value="1" onchange="calcTotal()">
<input id="total" type="text" readonly value="$18.95">

JavaScript:

function calcTotal() {
  var price = document.getElementById("price").value;
  var quantity = document.getElementById("quantity").value;
  var total = price * quantity;
  console.log(total);
}

Answer 1

试试这个。

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="$18.95">
<input id="quantity" type="text" value="1" onchange="calcTotal()">
<input id="total" type="text" readonly value="">

Answer 2

任何涉及字符串的操作都会返回 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