Online Ethical Hacking Course

Apply Now

Examples

JavaScript Programs To Add Two Numbers (7 Ways)

Adding two numbers is one of the first tasks you’ll learn when starting with JavaScript. It’s a simple yet effective way to understand basic concepts like variables, user input, functions, and event handling in JavaScript. In this blog, we will explore different methods to implement a JavaScript program to add two numbers, complete with code examples, outputs, and detailed explanations.

In JavaScript, adding two numbers can be done using the + operator. This operator is used to perform mathematical addition and can also concatenate strings. The key is ensuring that the values being added are numbers. Whether you are a beginner or an experienced developer, knowing how to implement addition in various ways is an essential skill.

JavaScript Programs to Add Two Numbers Using Variables

This is the simplest way to add two numbers in JavaScript. We declare two variables, assign them numeric values, and add them using the + operator.

Code

// JavaScript program to add two numbers
let num1 = 10;
let num2 = 20;
let sum = num1 + num2;
console.log("The sum is: " + sum);

Output

The sum is: 30

Explanation

Here, we define two variables num1 and num2 with values 10 and 20. The + operator adds these values, and the result is stored in the variable sum. The console.log() function is then used to display the sum in the console.

JavaScript Programs to Add Two Numbers Using User Input from prompt()

This method allows the user to input numbers, making the program interactive.

Code

// Add two numbers in JavaScript user input
let num1 = parseFloat(prompt("Enter the first number:"));
let num2 = parseFloat(prompt("Enter the second number:"));
let sum = num1 + num2;
alert("The sum is: " + sum);

Output

The program will prompt the user to enter two numbers and display the sum in an alert box.

Explanation

The prompt() function takes input from the user as a string. Using parseFloat(), we convert the string input into a number. The numbers are then added using the + operator, and the result is displayed in an alert box using the alert() function.

JavaScript Programs to Add Two Numbers Using a Function

Functions make the code reusable and organized. Here’s how you can add two numbers in JavaScript using a function:

Code

// Add two numbers in JavaScript using function
function addNumbers(a, b) {
    return a + b;
}
let result = addNumbers(15, 25);
console.log("The sum is: " + result);

Output

The sum is: 40

Explanation

The addNumbers function takes two parameters, a and b, and returns their sum. We call this function with arguments 15 and 25, and the result is stored in the variable result. The console.log() function is used to display the result in the console.

JavaScript Programs to Add Two Numbers Using HTML Textboxes

This method demonstrates how to create a JavaScript program to add two numbers using a textbox.

Code

<!DOCTYPE html>
<html>
<body>
    <h3>Add Two Numbers</h3>
    <form>
        <label>Number 1:</label>
        <input type="text" id="num1"><br><br>
        <label>Number 2:</label>
        <input type="text" id="num2"><br><br>
        <button type="button" onclick="addNumbers()">Add</button>
    </form>
    <p id="result"></p>

    <script>
        function addNumbers() {
            let num1 = parseFloat(document.getElementById("num1").value);
            let num2 = parseFloat(document.getElementById("num2").value);
            let sum = num1 + num2;
            document.getElementById("result").innerHTML = "The sum is: " + sum;
        }
    </script>
</body>
</html>

Output

A webpage where the user can enter two numbers and click the button to see the result.

Explanation

The user inputs numbers into two textboxes. The addNumbers function fetches the values using document.getElementById().value, converts them into numbers using parseFloat(), and adds them. The result is displayed in a paragraph element using innerHTML.

JavaScript Programs to Add Two Numbers Using Button Click

You can create a program where clicking a button triggers the addition.

Code

<!DOCTYPE html>
<html>
<body>
    <h3>Add Two Numbers Using Button</h3>
    <input type="number" id="num1" placeholder="Enter first number">
    <input type="number" id="num2" placeholder="Enter second number">
    <button onclick="addNumbers()">Add</button>
    <p id="output"></p>

    <script>
        function addNumbers() {
            let num1 = parseFloat(document.getElementById("num1").value);
            let num2 = parseFloat(document.getElementById("num2").value);
            let sum = num1 + num2;
            document.getElementById("output").textContent = "The sum is: " + sum;
        }
    </script>
</body>
</html>

Output

The result is displayed dynamically on the webpage after clicking the button.

Explanation

This method uses input fields and a button. When the button is clicked, the addNumbers function retrieves the input values, adds them, and updates a paragraph element with the result using textContent.

JavaScript Programs to Add Two Numbers Using Alert Box

Here’s how to show the result using an alert box:

Code

// Addition of two numbers in JavaScript using alert box
let num1 = 12;
let num2 = 8;
let sum = num1 + num2;
alert("The sum is: " + sum);

Output

An alert box displays:

The sum is: 20

Explanation

In this example, we declare two variables num1 and num2 with numeric values 12 and 8. The + operator is used to add these numbers, and the result is stored in the variable sum. Finally, the alert() function displays the sum in a pop-up box, making this method suitable for quick demonstrations or simple user interactions.

JavaScript Programs to Add Two Numbers Using Forms

A more structured approach involves forms. Here’s a JavaScript program to add two numbers using a form:

Code

<!DOCTYPE html>
<html>
<body>
    <form onsubmit="return addNumbers()">
        <label for="num1">Number 1:</label>
        <input type="number" id="num1" required><br><br>
        <label for="num2">Number 2:</label>
        <input type="number" id="num2" required><br><br>
        <input type="submit" value="Calculate">
    </form>
    <p id="result"></p>

    <script>
        function addNumbers() {
            let num1 = parseFloat(document.getElementById("num1").value);
            let num2 = parseFloat(document.getElementById("num2").value);
            let sum = num1 + num2;
            document.getElementById("result").innerText = "The sum is: " + sum;
            return false; // Prevent form submission
        }
    </script>
</body>
</html>

Output

The sum is displayed below the form after clicking the submit button.

Explanation

The onsubmit event calls the addNumbers function when the form is submitted. The function fetches input values, adds them, and displays the result in a paragraph element. The return false statement prevents the default form submission behavior, ensuring the page doesn’t reload.