How to add two numbers in html using textbox

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.


    

Add two number using text box as input using javascript

Enter First Number :

Enter Second Number :

Result :

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

Trilarion

10.2k9 gold badges63 silver badges100 bronze badges

asked Feb 14, 2015 at 20:49

2

Here a working fiddle: //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, 2015 at 20:57

MichelangeloMichelangelo

5,7525 gold badges29 silver badges48 bronze badges

2

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

answered Feb 14, 2015 at 21:06

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

MeanGreen

2,8795 gold badges38 silver badges59 bronze badges

answered Oct 7, 2015 at 11:22



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;

}
 

Magicprog.fr

4,0124 gold badges27 silver badges35 bronze badges

answered Feb 9, 2016 at 10:42

1

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

answered Apr 25, 2017 at 13:19

Pullat JunaidPullat Junaid

3,0823 gold badges20 silver badges22 bronze badges

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

      
   


Using Double Negation

First Number:

Second Number:

Minus

Sum: {{ sum1 }}

First Number:

Second Number:

Add

Sum: {{ sum2 }}

answered Jun 7, 2017 at 9:45


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

Enter First Number :

Enter Second Number :

Calculate


answered Oct 18, 2019 at 14:12

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.

Kos

4,5639 gold badges35 silver badges39 bronze badges

answered Feb 13, 2021 at 16:13


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

answered Jun 22, 2021 at 11:40

1

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

sta

26.3k8 gold badges40 silver badges53 bronze badges

answered Aug 20, 2021 at 5:55

1

Instead of writing

.innerHTML = result;

use

.value = result;

xonya

1,89529 silver badges37 bronze badges

answered May 17 at 17:12

              
          
            
            
            
            Calculator DEMO  
                    
         
        
     
                
        

Enter Number 1:

Enter Number 2:

+ - *

/ % percentage

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"']; } }

answered Jun 3 at 10:36

1

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

var c = Number[first] + Number[second];

David Buck

3,60033 gold badges29 silver badges34 bronze badges

answered May 10, 2020 at 9:26

How do you add two values in HTML?

You can then add numbers in the first two text boxes and store them in a variable such as "result," as follows: var result = Number[box1. value] + Number[box2. value]; box3.

How do you add two text boxes in HTML?

Here we will create TextBox in HTML 5. We create TextBox by tag with type="type_name" attribute. Like as given below: .
.
.
.
First Name..
.
Last Name..
.

How do you add a value to a text box?

Open Visual Studio->New Project->Templates->Visual C#->Windows->WindowForm Application. Select WindowForm Application.. Then, give Project Name and Project Location. View->Select ToolBox,Using the Toolbox , Design the Form in Window Applicaton. Click the Textbox Properties and add the TextChanged Event.

How do I multiply two TextBox values in HTML?

The first thing you have got to change is the line with the multiplication. It should be: var myResult = myBox1 * myBox2; You should not use innerHTML with input fields - use value. Additional to that, the onchange event fires only when the input looses the focus.

Chủ Đề