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

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

Answer 2

可能您需要将事件绑定到按钮（单击）或输入元素（输入）

在这个例子中，一个按钮触发了计算。

这里调整如下：

对输入表单元素使用属性 .value。
使用对象 Number 或加号 + 转换为数字。
验证输入的值（由您决定）。

document.getElementById('calculate').addEventListener('click', function() {
  var amount = document.getElementById("amount").value;
  var amount = +amount;
  var quantity = document.getElementById("quantity").value;
  var quantity = +quantity;
  var total = amount * quantity;
  document.getElementById("total").value = total;
});

Amount: <input type="number" id="amount" name="amount">
<br> Quantity: <input type="number" id="quantity" name="quantity">
<br>
<br> <input id='calculate' type='button' value='Calculate'>
<br>
<br> Total: <input type="number" id="total" name="total">

Answer 3

你应该添加一个函数，并在输入变化时调用它所以尝试使用 oninput 事件并将 document.getElementById("total").innerHTML = total; 更改为 document.getElementById("total").value = total;

<html><head></head><body>
Amount: <input type="number" oninput="calculate()" id="amount" name="amount">
<br>
Quantity: <input type="number" oninput="calculate()" id="quantity" name="quantity">
<br>
Total: <input type="number" id="total" name="total">

    
 <script>
  function calculate(){
   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;
  }
 </script>
</body>
</html>

Answer 4

 function compute() {
        var p = document.getElementById("principal").value;
        var r = document.getElementById("rate").value;
        var t = document.getElementById("time").value;
        var answer = (p * r * t) / 100;
        document.getElementById("answer").value = answer;
    }

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

How to calculate two input fields and have the total display within an Input Element

javascript

calculated-field