html - Add three numbers and display result in textbox with Javascript - Stack Overflow

i was just trying to write a code that will use 3 input fields and show their sum into result field. If

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>

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>
Share Improve this question asked Jan 28, 2017 at 21:52 Muhammad NaeemMuhammad Naeem 392 silver badges8 bronze badges 3
  • You can use jQuery (if you don't know how to use it, please ment here). – Kfir Commented Jan 28, 2017 at 21:54
  • Try fixing this document.getElementByID('final').value=z typo, to getElementById – azs06 Commented Jan 28, 2017 at 21:58
  • thanks dear. I just correct it. – Muhammad Naeem Commented Jan 28, 2017 at 22:03
Add a ment  | 

2 Answers 2

Reset to default 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/yq60qad0/

It's a typo. =>

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

should be Id, not ID

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745341197a4623333.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信