Add two numbers

This tutorial demonstrates how to get two inputs from the user within a HTML page and have a button on the page to call a javascript method to process the inputs and alter the answer output on the web-page.

Within HTML, there are input tags that allow the user to input data that is passed either to a javascript method to validate the inputs (for example a registration forum) or to pass data back to the server (after the validation has taken place if required).

The value 1 input is defined as
value 1 = <input type=’text’ id=value1 name=’value1′ value=’1’/>
the input type is text, which means any textual value, [A-Z]*[0-9]* but in this case since just adding integers [0-9] would be the required input.
The id is for getting the value from the input with using javascript document.getElementById, value is for setting the default value.

The function within the javascript, addNumbers() will get the inserted value1 by using the javascript document object. Within this object there is a method called getElementById that returns back the object, which in turn using the .value of the object returned can be passed to the parseInt (which converts a string value into a integer value). The same method is used for the answer input within the web-page (getElementById) but assign the return object to a variable allows access to the .value to set the value on the web-page.

The source code is

<html>
  <head>
        <title>Input tutorial</title>
        <script language="javascript">
                function addNumbers()
                {
                        var val1 = parseInt(document.getElementById("value1").value);
                        var val2 = parseInt(document.getElementById("value2").value);
                        var ansD = document.getElementById("answer");
                        ansD.value = val1 + val2;
                }
        </script>
  </head>
  <body>
        value1 = <input type="text" id="value1" name="value1" value="1"/>
        value2 = <input type="text" id="value2" name="value2" value="2"/>
        <input type="button" name="Sumbit" value="Click here" onclick="javascript:addNumbers()"/>
        Answer = <input type="text" id="answer" name="answer" value=""/>
  </body>
</html>

save as addtwonumbers.html and then open in a web browser (e.g. FireFox)

78 thoughts on “Add two numbers”

  2. Hi xyz

    I would say taking the theory of Armstrong numbers from here

    Would say that this should do it

    <html>
  <head>
        <title>Input tutorial</title>
        <script language="javascript">
                function check()
                {
                        var val1 = parseInt(document.getElementById("value1").value);
                        var ansD = document.getElementById("answer");
                        val2 = 0;
                        while (val1 > 0)
                        {
                           val3 = val1 %10;
                           val2 += val3 * val3* val3;
                           val1 = (val1-val3) / 10;
                        }
                        if (val2 > 0 && (val2 == parseInt(document.getElementById("value1").value)))
                        {
                           ansD.value = "Yes";
                        }
                        else
                        {
                           ansD.value = "No";
                        }
                }
        </script>
  </head>
  <body>
        value1 = <input type="text" id="value1" name="value1" value="1"/>
        <input type="button" name="Sumbit" value="Armstrong checker" onclick="javascript:check()"/>
        Answer = <input type="text" id="answer" name="answer" value=""/>
  </body>
</html>

  5. Click the button to check the sum.

    v1:
    v2:

    Answer

    function myFunction()
    {
    var v1,v2,ans;
    v1=document.getElementById(“v1”).value;
    v2=document.getElementById(“v2”).value;
    ans=parseInt(v1,10)+parseInt(v2,10);
    document.getElementById(“answer”).innerHTML=ans;
    }

  6. Just want to say how awesomely patient you are. I was looking for a 3 numbers script, and found your original script that I modified (that you also modified later, but I was not scrolling fast enough). And then all the questions you were patiently answering… made me a fan of your site.

  7. simple adder scripting

    ADDITION
    Enter a number:

    Enter a number:

    Answer=

    What is wrong in it?????

  8. Hi Preet

    I cannot see anything wrong with that within the javascript code, but could be within the HTML ? have you tried web developer toolbar within FireFox ?

    Regards
    Genux

  9. if we want a function with parameter then how we call it?
    like
    function add(a,b){
    var c=a+b;
    alert(c);
    }

  11. how can i show the decimal value in the resultbox…? Currently it shows by rounding off the value…can someone help me out..?

  13. Input tutorial

    function fun()   
{            
 function addNumbers()
                {
                        var val1 = parseInt(document.getElementById("value1").value);
                        var val2 = parseInt(document.getElementById("value2").value);
                        var ansD = document.getElementById("answer");
                        ansD.value = val1 + val2;
                }
function check()
{
 if (answer==100)
                        {
                           alert("ok");
return true;
                        }
                        else
                        {
                             alert("Number must be equal to 100");
return false;
                        }
}
 
}

  14. This is an awsome site for learning and developing website. we can easily understand the logic of the program

  15. Write a script to read two numbers in prompt window and display their sum in the document

  17. I want to print the multiplication of three numbers but without clicking on calculate or any button can it be automatically after the insertion of 3 values got completed then i am clicking on tab button in my pc i want to print the result.

    Can u help me????

  25. WHAT IS WRONG IN BELOW CODE

    This example calls a function which performs a calculation, and returns the result:

    function myFunction() {
    var a=5, b=5;
    var c= a * b;
    }

    ANSWER

  26. Hi Sumit

    The function (myFunction) does not return a result e.g.

    function myFunction() {
    var a=5, b=5;
    return a * b;
    }

    does.

  27. adding two numbers inside the single textbox as (1+2) , after clicking a button , result should be show in another textbox. what should i do using jquery?

  28. I am beguinning to learn JavaScript. i need to add two numbers that the user enters in two text boxes in the webpage. This is no problem, my Function works fine. I can see the correct answer using “document.write” or Alert. The problem is returning the result obtained by the function to a third text box in the webpage.

Leave a Reply

Your email address will not be published. Required fields are marked *