CODEWITHSUNDEEP
javascriptcalculated-field
Mark
Mark

Reputation: 187

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

I'm trying to multiply two input fields and have the result display within the total input element. Can someone tell me where is my problem within this code:

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

Upvotes: 1

Views: 5933

Answers (4)

Duzie
Duzie

Reputation: 11

 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;
    }

Upvotes: -1

Mina Ragaie
Mina Ragaie

Reputation: 477

you should add a function, and call it on input change so try to use oninput event and change document.getElementById("total").innerHTML = total; to be 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>

Upvotes: 2

Nick Parsons
Nick Parsons

Reputation: 50749

Use document.getElementById("total").value instead of document.getElementById("total").innerHTML = total. Also, you need to trigger your code on a particular event. Here I have just set it up to trigger when the user enters a value into either input field using the oninput="calc()" attribute on both your input fields:

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

Upvotes: 6

Ele
Ele

Reputation: 33726

Probably you need to bind an event either to a button (click) or to the input elements (input)

In this example, a button triggers the calculation.

Here the following adjustments:

  1. Use the attribute .value for input-form elements.
  2. Use the object Number or plus + sign to convert to a number.
  3. Validates the entered values (this is up to you).

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

Upvotes: 2

Related Questions