Add two numbers and display result in textbox with Javascript

Question

I was just trying to write a simple javascript program that will demonstrate to take user input from text field, and clicking the button will display the summation result of those number in another text field. But unfortunately the below code is not working. Clicking the button does not show anything in the result text field.

<body>
    <div>
        <div>
            <h1>Add two number using text box as input using javascript</h1>
        </div>
            Enter First Number : <br>
            <input type="text" id="Text1" name="TextBox1">
            <br>
            Enter Second Number : <br>
            <input type="text" id="Text2" name="TextBox2">
            <br>
            Result : <br>
            <input type="text" id="txtresult" name="TextBox3">
            <br>
         <input type="button" name="clickbtn" value="Display Result" onclick="add_number()">

        <script type="text/javascript">
            function add_number(){
            var first_number = parseInt(document.getElementsById("Text1").value);
            var second_number = parseInt(document.getElementsById("Text2").value);
            var result = first_number + second_number;
            document.getElementById("txtresult").innerHTML = result;    
            }
        </script>

I assume that you have missed to add a closing `` before the ` — Christos, Feb 14 '15 at 20:52
Thanks for the reply. But what you assume is not correct. I have checked again but its not working though I have closed the — Sayeed, Feb 14 '15 at 20:56
This problem was caused by a typo: `getElementsById` should be `getElementById`. — starball, Oct 10 '22 at 01:49

score 6 · Accepted Answer · answered Feb 14 '15 at 20:57

6

Here a working fiddle: http://jsfiddle.net/sjh36otu/

        function add_number() {

            var first_number = parseInt(document.getElementById("Text1").value);
            var second_number = parseInt(document.getElementById("Text2").value);
            var result = first_number + second_number;

            document.getElementById("txtresult").value = result;
        }

answered Feb 14 '15 at 20:57

Michelangelo

5,888
5
31
50

Thanks much Mikey. Further more I was using Brackets editor to write the code. When I press . after getElementById there is nothing like .value; instead of .value I found .nodeValue. Could you please tell me if there any significant difference in between? – Sayeed Feb 14 '15 at 21:08
Yes there is a difference. Here you can find a clear explanation http://reference.sitepoint.com/javascript/Node/nodeValue and this post:http://stackoverflow.com/questions/6875411/javascript-getting-node-value clarifies it a little bit. You probably don't get `.value` in brackets because it is really common to use it so most people don't need a reminder for that. – Michelangelo Feb 14 '15 at 21:41

score 3 · Answer 2 · answered Feb 14 '15 at 21:06

3

When you assign your variables "first_number" and "second_number", you need to change "document.getElementsById" to the singular "document.getElementById".

answered Feb 14 '15 at 21:06

Jessie Schalles

69
4

score 1 · Answer 3 · edited Oct 07 '15 at 12:01

1

var first_number = parseInt(document.getElementById("Text1").value);
var second_number = parseInt(document.getElementById("Text2").value);

// This is because your method .getElementById has the letter 's': .getElement**s**ById

edited Oct 07 '15 at 12:01

MeanGreen

3,098
5
37
63

answered Oct 07 '15 at 11:22

arcitchair

11
1

score 1 · Answer 4 · edited Feb 09 '16 at 14:49

1

<script>

function sum()
{
    var value1= parseInt(document.getElementById("txtfirst").value);
    var value2=parseInt(document.getElementById("txtsecond").value);
    var sum=value1+value2;
    document.getElementById("result").value=sum;

}
 </script>

edited Feb 09 '16 at 14:49

Magicprog.fr

4,072
4
26
35

answered Feb 09 '16 at 10:42

Sani Vishwakarma

11
2

can you provide more details ? – maazza Feb 09 '16 at 10:48

score 0 · Answer 5 · answered Apr 25 '17 at 13:19

You made a simple mistake. Don't worry.... Simply use getElementById instead getElementsById

true

var first_number = parseInt(document.getElementById("Text1").value);

False

var first_number = parseInt(document.getElementsById("Text1").value);

Thanks ...

score 0 · Answer 6 · answered Jun 07 '17 at 09:45

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

    $scope.minus = function() {     

     var a = Number($scope.a || 0);
            var b = Number($scope.b || 0);
            $scope.sum1 = a-b;
    // $scope.sum = $scope.sum1+1; 
    alert($scope.sum1);
    }

   $scope.add = function() {     

     var c = Number($scope.c || 0);
            var d = Number($scope.d || 0);
            $scope.sum2 = c+d;
    alert($scope.sum2);
    }
});

<head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
   </head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
     <h3>Using Double Negation</h3>

    <p>First Number:
        <input type="text" ng-model="a" />
    </p>
    <p>Second Number:
        <input type="text" ng-model="b" />
    </p>
    <button id="minus" ng-click="minus()">Minus</button>
    <!-- <p>Sum: {{ a - b }}</p>  -->
 <p>Sum: {{ sum1 }}</p>

    <p>First Number:
        <input type="number" ng-model="c" />
    </p>
    <p>Second Number:
        <input type="number" ng-model="d" />
    </p>
 <button id="minus" ng-click="add()">Add</button>
    <p>Sum: {{ sum2 }}</p>
</div>

score 0 · Answer 7 · answered Oct 18 '19 at 14:12

<script>
function myFunction() {
var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var x = y + z;
document.getElementById("result").innerHTML = x;
}
</script>
<p>
<label>Enter First Number : </label><br>
<input type="number" id="txt1" name="text1"><br/>
<label>Enter Second Number : </label><br>
<input type="number" id="txt2" name="text2">
</p>
<p>
<button onclick="myFunction()">Calculate</button>
</p>
<br/>
<p id="result"></p>

score 0 · Answer 8 · edited Feb 13 '21 at 16:22

0

It should be document.getElementById("txtresult").value= result;

You are setting the value of the textbox to the result. The id="txtresult" is not an HTML element.

edited Feb 13 '21 at 16:22

Kos

4,890
9
38
42

answered Feb 13 '21 at 16:13

george

1

score 0 · Answer 9 · answered Jun 22 '21 at 11:40

0

<script>
       var text1 = document.getElementById("Text1").value;
       var text2 = document.getElementById("Text2").value;
       var answer = parseInt(text1) + parseInt(text2);
      function add_number(){
       document.getElementById("txtresult").value = answer;
       }
</script>

answered Jun 22 '21 at 11:40

johnbosco ononiba

1
1

2

Please add some description to explain your code. – a.ak Jun 22 '21 at 12:24

score 0 · Answer 10 · edited Aug 20 '21 at 06:14

0

its Not document.getElementsById function its document.getElementById try it

edited Aug 20 '21 at 06:14

STA

30,729
8
45
59

answered Aug 20 '21 at 05:55

Pradip Katare

1

I know you were trying to help. But this has been motioned multiple times in other answers. Don't waste your time on old questions unless the existing answer is outdated or not working for you. – HardcoreGamer Aug 20 '21 at 09:17

score 0 · Answer 11 · edited May 22 '22 at 09:16

0

Instead of writing

.innerHTML = result;

use

.value = result;

edited May 22 '22 at 09:16

xonya

2,146
29
37

answered May 17 '22 at 17:12

waseem bhat

1
1

Nishit Patel · Answer 12 · 2022-06-03T10:38:26.853

<html lang = "en">              
        <head>  
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Calculator DEMO</title>  
                    
        </head> 
        
    <body> 
                
        <div>

            <p>
                <label>Enter Number 1: </label><br>
                    <input type="number" id="txt1" name="text1"><br/>
                <label>Enter Number 2: </label><br>
                    <input type="number" id="txt2" name="text2">

            </p>

            <p>
                <button onclick="resultsum()">+</button>
            
                <button onclick="resultsub()">-</button>
            
                <button onclick="resultmul()">*</button>
            </p>
            
            <p>
                <button onclick="resultdiv()">/</button>
            
                <button onclick="resultmod()">%</button>
            
                <button onclick="resultper()">percentage</button>
            </p>
        
            <script>
                        
                function resultsum()
                    {  
                        var y = parseInt(document.getElementById("txt1").value);
                        var z = parseInt(document.getElementById("txt2").value);
                        var sm = y + z;
                        document.getElementById("resultsum").innerHTML = sm;
                        
                            if(document.getElementById("resultsum").innerHTML%2!=0)
                            {
                                alert('"calculated Result is odd"');    
                            }
                            else
                            {
                                alert('"calculated Result is not "ODD"');
                            }
                    }
                function resultsub()
                    {
                        var y = parseInt(document.getElementById("txt1").value);
                        var z = parseInt(document.getElementById("txt2").value);
                        var sb = y - z;

                        document.getElementById("resultsub").innerHTML = sb;
                            {
                                if(document.getElementById("resultsub").innerHTML%2!=0)
                                {
                                    alert('"calculated Result is odd"');
                                }
                                else
                                {
                                    alert('"calculated Result is not "ODD"');
                                }
                            }
                    }
                    function resultmul()
                    {  
                        var y = parseInt(document.getElementById("txt1").value);
                        var z = parseInt(document.getElementById("txt2").value);
                        var ml = y * z;
                        document.getElementById("resultmul").innerHTML = ml;
                        
                            if(document.getElementById("resultmul").innerHTML%2!=0)
                            {
                                alert('"calculated Result is odd"');    
                            }
                            else
                            {
                                alert('"calculated Result is not "ODD"');
                            }
                    }
                    function resultdiv()
                    {  
                        var y = parseInt(document.getElementById("txt1").value);
                        var z = parseInt(document.getElementById("txt2").value);
                        var dv = y / z;
                        document.getElementById("resultdiv").innerHTML = dv;
                        
                            if(document.getElementById("resultdiv").innerHTML%2!=0)
                            {
                                alert('"calculated Result is odd"');    
                            }
                            else
                            {
                                alert('"calculated Result is not "ODD"');
                            }                        
                    }
                    function resultmod()
                    {  
                        var y = parseInt(document.getElementById("txt1").value);
                        var z = parseInt(document.getElementById("txt2").value);
                        var md = y + z;
                        document.getElementById("resultmod").innerHTML = md;
                        
                            if(document.getElementById("resultmod").innerHTML%2!=0)
                            {
                                alert('"calculated Result is odd"');    
                            }
                            else
                            {
                                alert('"calculated Result is not "ODD"');
                            }
                        
                    }
                    function resultper()
                    {  
                        var y = parseInt(document.getElementById("txt1").value);
                        var z = parseInt(document.getElementById("txt2").value);
                        var per = (y + z )/2;
                        document.getElementById("resultper").innerHTML = per;
                        
                            if(document.getElementById("resultper").innerHTML%2!=0)
                            {
                                alert('"calculated Result is odd"');    
                            }
                            else
                            {
                                alert('"calculated Result is not "ODD"');
                            }
                    }
            </script>
            <input type="text" name="Answers" id="ans" >        
                <br/>
            <p id="resultsum"></p>
            <p id="resultsub"></p>
                    <p id="resultmul"></p>
                    
                    <p id="resultdiv"></p>
                <p id="resultmod"></p>
            <p id="resultper"></p>
        </div>
    </body>
</html>

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Ethan, Jun 03 '22 at 12:22

score -1 · Answer 13 · edited May 10 '20 at 10:27

-1

You can simply convert the given number using Number primitive type in JavaScript as shown below.

var c = Number(first) + Number(second);

edited May 10 '20 at 10:27

David Buck

3,752
35
31
35

answered May 10 '20 at 09:26

Sai Kumar

1

Add two numbers and display result in textbox with Javascript

13 Answers13

Linked