Add three numbers and display result in textbox with Javascript

Question

i was just trying to write a code that will use 3 input fields and show their sum into result field. If a person put data in field 1, the result field should show the data in result field and when user put data in second field, result field should show the sum of field 1 and field 2 and when user put data into field 3, their sum should be show on result field. I write below code but not got any success. I am a new learner.

<body>
Field 1: <input type="text" id="num1" onkeyup="sum();" > </br>
Field 2: <input type="text" id="num2" onkeyup="sum();" > </br>
Field 3: <input type="text" id="num3" onkeyup="sum();"> </br>
Sum: <input type="text" id="final"  />



<script type="text/javascript">

function sum()
{


var w = document.getElementById('num1').value;

var x = document.getElementById('num2').value;

var y = document.getElementById('num3').value;

var z=parseInt(w)+parseInt(x)+parseInt(y);


document.getElementByID('final').value=z;

}       
</script>

</body>

You can use jQuery (if you don't know how to use it, please comment here). — Kfir
– Kfir, Commented Jan 28, 2017 at 21:54
Try fixing this document.getElementByID('final').value=z typo, to getElementById — azs06
– azs06, Commented Jan 28, 2017 at 21:58

Tomas Reimers · Accepted Answer · 2017-01-28 21:59:17Z

3

Two issues:

(1) Small typo in your last line, you used getElementByID instead of getElementById

(2) You need to account for the case where there is no value, one way to do this is to or it with 0 (which evaluates to 0 if there is no value).

Here is a working example:

function sum()
{
  var w = document.getElementById('num1').value || 0;
  var x = document.getElementById('num2').value || 0;
  var y = document.getElementById('num3').value || 0;

  var z=parseInt(w)+parseInt(x)+parseInt(y);

  document.getElementById('final').value=z;
};

https://jsfiddle.net/yq60qad0/

answered Jan 28, 2017 at 21:59

Tomas Reimers

3,2924 gold badges26 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Muhammad Naeem Over a year ago

Thanks mate. I spend a day on this. Glad to get working code.

Tomas Reimers Over a year ago

Just glad to be helpful :)

MattJ · Accepted Answer · 2017-01-28 21:58:02Z

0

It's a typo. =>

document.getElementByID('final').value=z;

should be Id, not ID

answered Jan 28, 2017 at 21:58

MattJ

113 bronze badges

2 Comments

Muhammad Naeem Over a year ago

thanks for the correcting me. But still when i put input in first two fields result field shows NaN...how to handle it?

MattJ Over a year ago

It's because all the numbers are not defined yet to sum them up. NaN means "not a number", Your code is trying to add up "5", "8", and undefined, for example. Your code works properly only when all three inputs are done.

Collectives™ on Stack Overflow

Add three numbers and display result in textbox with Javascript

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related