如何计算两个输入字段并在输入元素中显示总和

Question

我正在尝试将两个输入字段相乘并将结果显示在总输入元素中。有人可以告诉我这段代码中的问题出在哪里吗：

var amount = document.getElementById("amount").value;
var amount = parseInt(amount, 10);
var quantity = document.getElementById("quantity").value;
var quantity = parseInt(quantity, 10);
var total = amount * quantity;
document.getElementById("total").innerHTML = total;

Amount: <input type="number" id="amount" name="amount">
<br> Quantity: <input type="number" id="quantity" name="quantity">
<br> Total: <input type="number" id="total" name="total">

Answer 1

使用document.getElementById("total").value而不是document.getElementById("total").innerHTML = total. 此外，您需要在特定事件上触发代码。在这里，我刚刚将其设置为当用户使用两个输入字段上的属性在任一oninput="calc()"输入字段中输入值时触发：

function calc() {
  var amount = document.getElementById("amount").value;
  var amount = parseInt(amount, 10);
  var quantity = document.getElementById("quantity").value;
  var quantity = parseInt(quantity, 10);
  var total = amount * quantity;
  document.getElementById("total").value = total;
}

Amount: <input type="number" id="amount" name="amount" oninput="calc();">
<br> Quantity: <input type="number" id="quantity" name="quantity" oninput="calc();">
<br> Total: <input type="number" id="total" name="total">