How to add two numbers in JavaScript using TextBox | Example code

You can add two textbox values and show the result of addition to into the 3rd textbox by pressing the button using JavaScript and HTML code.

Add two numbers in JavaScript with textbox example

Complete HTML example code, where 2 Input textbox is for number and 3rd for show sum of first 2 textboxes. JavaScript function will call on clicking a button.

<html>
<body>
    <div>
        First Number : <br>
        <input type="text" id="text1">
        <br>
        Second Number : <br>
        <input type="text" id="text2">
        <br>
        Result : <br>
        <input type="text" id="res">
        <br>
        <input type="button" value="Display Result" onclick="addNumber()">
    </div>

        <script>

            function addNumber(){
                var f_num = parseInt(document.getElementById("text1").value);
                var s_num = parseInt(document.getElementById("text2").value);

                var sum = f_num + s_num;

                document.getElementById("res").value = sum;  

            }
        </script>
    </body>
</html>

Output:

How to add two numbers in JavaScript using TextBox

Must Read: Add two textbox values and display the sum in a third textbox automatically – Click Here

Do comment if you have any doubts and suggestion on this topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.