What mistake I am doing while adding two numbers using Javascript

Question

I tried adding two numbers by getting the values from the text box and calculate then display it using innerhtml but it isn't working. What mistake am I doing in this code?

<body onload="alert('Hey check out my Calculator')">
 <h1 align="center" >  functional calulator </h1>
 <div class="Calculator" align="center">
    <input type="text" name="text1" id="a1">Enter 1st Number <br><br>
    <input type="text" name="text2" id="a2">Enter 2nd Number<br><br>
    <button   onclick="add()" >Add</button>
    <p id="p1"></p>
    
    <script type="text/javascript"> 
        function add(){
            var a = document.getElementById("a1").value;
            var b = document.getElementByID("a2").value;
            var total = a + b;
            document.getElementById("p1").innerHTML = total;
            
            

        }
        </script>

Elaborate on what " it isn't working" means please. What are you getting? — j08691
– j08691, Commented Sep 29, 2016 at 14:05

brso05 · Accepted Answer · 2016-09-29 14:09:26Z

2

you are adding them as a strings so they are being concatenated you should parse them to integers first

var a = parseInt(document.getElementById("a1").value);
var b = parseInt(document.getElementById("a2").value);
var total = a + b;
document.getElementById("p1").innerHTML = total;

edited Sep 29, 2016 at 14:09

brso05

13.3k2 gold badges25 silver badges41 bronze badges

answered Sep 29, 2016 at 14:06

Yamen Nassif

2,4962 gold badges28 silver badges50 bronze badges

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

1 Comment

Tobia Over a year ago

I suggest to add 10 as second argument of parseInt, old broswers can parse "010" as octal

Tobia · Accepted Answer · 2016-09-29 14:07:12Z

1

a, b are strings. Maybe you want to parse them to ints?

answered Sep 29, 2016 at 14:07

Tobia

9,59529 gold badges122 silver badges245 bronze badges

Comments

Chetan · Accepted Answer · 2016-09-29 14:09:24Z

Try This - You have made spell mistake - Its document.getElementById not document.getElementByID

<body onload="alert('Hey check out my Calculator')">
 <h1 align="center" >  functional calulator </h1>
 <div class="Calculator" align="center">
 	<input type="text" name="text1" id="a1">Enter 1st Number <br><br>
 	<input type="text" name="text2" id="a2">Enter 2nd Number<br><br>
 	<button   onclick="add()" >Add</button>
 	<p id="p1"></p>
 	
	<script type="text/javascript">	
		function add(){
           var a = document.getElementById("a1").value;
			var b = document.getElementById("a2").value;
            
			var total = parseInt(a) + parseInt(b);
			document.getElementById("p1").innerHTML = total;
			
			

		}
		</script>

Sankar · Accepted Answer · 2016-09-29 14:11:56Z

getElementByID should be getElementById in var b = document.getElementById("a2").value;

and do parseInt() for your a and b to consider them as a number.

<body onload="alert('Hey check out my Calculator')">
  <h1 align="center">  functional calulator </h1>
  <div class="Calculator" align="center">
    <input type="text" name="text1" id="a1">Enter 1st Number
    <br>
    <br>
    <input type="text" name="text2" id="a2">Enter 2nd Number
    <br>
    <br>
    <button onclick="add()">Add</button>
    <p id="p1"></p>

    <script type="text/javascript">
      function add() {
        var a = document.getElementById("a1").value;
        var b = document.getElementById("a2").value;
        var total = parseInt(a) + parseInt(b);
        document.getElementById("p1").innerHTML = total;
      }
    </script>

Collectives™ on Stack Overflow

What mistake I am doing while adding two numbers using Javascript

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related