如何使用 Javascript 将来自不同输入的值相乘以获得总数？答案

【问题标题】：How do I multiply values from different inputs to get a total using Javascript?如何使用 Javascript 将来自不同输入的值相乘以获得总数？
【发布时间】：2020-06-08 07:51:29
【问题描述】：

我正在尝试做一个购物车，我希望在输入数量后总数自动更改（总数是价格乘以数量）。我正在尝试为此使用 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);
}

【问题讨论】：

您对"$18.95" * "1" 有什么期望？你应该乘以数字，而不是字符串。

标签： javascript function shopping-cart multiplication

【解决方案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="">

【讨论】：

【解决方案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

【讨论】：