如何使用 Javascript 將來自不同輸入的值相乘以獲得總數？

Question

我正在嘗試做一個購物車，我希望在輸入數量后總數自動更改（總數是價格乘以數量）。 我正在嘗試為此使用 Javascript ，但我似乎無法理解它，因為它提出了 null 並且在它說 NaN 之前。

PS：現在是一個控制台日志，只是為了看看它是否有效，但我需要將它到 go 到總輸入標簽中。

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