如何使用 Javascript 将不同输入的值相乘以获得总计？

Question

我正在尝试做一个购物车，我希望在输入数量后自动更改总计（总计是价格乘以数量）。我正在尝试使用Javascript来实现这一点，我似乎无法得到它，因为它正在提出空值，并且在它说NaN之前。

PS：目前它是一个控制台日志，只是为了看看它是否有效，但我需要它进入总输入标签。

网页：

<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">

脚本：

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&nbsp; var price = parseFloat(document.getElementById("price").value.substr(1));&nbsp;// parse float quantity&nbsp; var quantity = parseFloat(document.getElementById("quantity").value);&nbsp; var total = price * quantity;&nbsp; //pass calculated value to input with id total&nbsp; 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

任何涉及字符串的操作都会返回 ，但是您应该强制输入值NaNNumberfunction calcTotal() {&nbsp; var price = document.getElementById("price").value;&nbsp; var quantity = document.getElementById("quantity").value;&nbsp; var total =Number(price) * Number(quantity);&nbsp; console.log(total);}使用数字与解析浮动因此，只要您有标准的数字输入，就没有区别。但是，如果您的输入以数字开头，然后包含其他字符，parseFloat 会将数字从字符串中截断，而数字则给出 NaN（不是数字）：parseFloat('1x'); // => 1Number('1x'); // => NaN