How to Sum all Numbers in a Range in JavaScript ?

Last Updated : 19 Jan, 2024

We have to write the code to sum all the numbers that lie inside a range of numbers entered by the users. There will be two input fields on the web page that allow the user to enter the maximum and the minimum numbers of the range and then find out the sum of all numbers that lie only inside those two numbers(excluding the numbers).

Example:

Input: Entered minimum number: 2
Entered Maximum Number: 8
Output: Result (Sum of all numbers lie inside the entered numbers): 25(3+4+5+6+7)

Input: Entered minimum number: 6
Entered Maximum Number: 15
Output: Result (Sum of all numbers lie inside the entered numbers): 84(7+8+9+10+11+12+13+14)

We can use the following approaches to solve this problem.

Table of Content

Using the loops in JavaScript
Using the Arithmetic Series formula

Using the loops in JavaScript

The loops in JavaScript can be used to iterate over the elements that fall inside the entered maximum and minimum numbers which can be added one by one to get the sum of all of them.

NOTE: In this example, we will implement it using the for loop. You can also use other loops that are available in JavaScript to get the sum of numbers in a range.

Syntax:

for(let i=minNum; i<maxNum; i++){
    // Code Statements 
}

Example: The below code illustrates the use of the for loop to get the sum of all numbers in a range using JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>
        How to sum of all numbers in a
        range using JavaScript?
    </title>
    <style>
        .container {
            text-align: center;
        }
 
        .inCont {
            display: inline-block;
            text-align: start;
            padding: 15px;
        }
    </style>
</head>
 
<body>
    <div class="container">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h3>
            Enter maximum and minimum numbers and
            click the below button <br /> to get the sum
            of numbers fall inside the entered numbers.
        </h3>
        <form id="myForm">
            <div class="inCont">
                <label for="minNum">
                    Minimum Number:
                </label><br />
                <input type="number" id="minNum">
            </div>
 
            <div class="inCont">
                <label for="maxNum">
                    Maximum Number:
                </label><br />
                <input type="number" id="maxNum">
            </div><br /><br />
            <input type="submit" value="Find Sum">
        </form>
        <p id="result"></p>
    </div>
 
    <script>
        const myForm = 
            document.getElementById('myForm');
 
        myForm.addEventListener('submit', function (e) {
            e.preventDefault();
            let sum = 0;
            const result = 
                document.getElementById('result');
            const minNum = 
                document.getElementById('minNum').value;
            const maxNum = 
                document.getElementById('maxNum').value;
            const numberMin = Number(minNum);
            const numberMax = Number(maxNum);
            if (minNum === "" || maxNum === "") {
                result.innerHTML = `
                <b style='color: red'>
                    Input fields can not be empty!!
                </b>`;
            }
            else if (numberMin > numberMax) {
                result.innerHTML = `
                <b style='color: red'>
                    Minimum number must be less than 
                    Maximum number!!
                </b>`;
            }
            else {
                for (let i = numberMin + 1; i < numberMax; i++) {
                    sum += i;
                }
                result.innerHTML = `
                <b style='color: green'>
                    Sum of numbers between ${numberMin} 
                    and ${numberMax} is: ${sum}
                </b>`;
            }
        })
    </script>
</body>
 
</html>

Output:

rangeSumGIF

Using the Arithmetic Series formula

The arithmetic series formula n/2*(2a+(n-1)*d) can be used to find the sum of numbers that lie inside the range of the entered numbers.

Syntax:

const sum = n/2*(2a+(n-1)*d);

Example: The below example will illustrate the use of the arithmetic series formula to calculate the sum of the numbers in a range.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>
        How to sum of all numbers in a
        range using JavaScript?
    </title>
    <style>
        .container {
            text-align: center;
        }
 
        .inCont {
            display: inline-block;
            text-align: start;
            padding: 15px;
        }
    </style>
</head>
 
<body>
    <div class="container">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h3>
            Enter maximum and minimum numbers and
            click the below button <br /> to get the sum
            of numbers fall inside the entered numbers.
        </h3>
        <form id="myForm">
            <div class="inCont">
                <label for="minNum">
                    Minimum Number:
                </label><br />
                <input type="number" id="minNum">
            </div>
 
            <div class="inCont">
                <label for="maxNum">
                    Maximum Number:
                </label><br />
                <input type="number" id="maxNum">
            </div><br /><br />
            <input type="submit" value="Find Sum">
        </form>
        <p id="result"></p>
    </div>
 
    <script>
        const myForm = 
            document.getElementById('myForm');
 
        myForm.addEventListener('submit', function (e) {
            e.preventDefault();
            let sum = 0;
            const result = 
                document.getElementById('result');
            const minNum = 
                document.getElementById('minNum').value;
            const maxNum = 
                document.getElementById('maxNum').value;
            const numberMin = Number(minNum);
            const numberMax = Number(maxNum);
            if (minNum === "" || maxNum === "") {
                result.innerHTML = `
                <b style='color: red'>
                    Input fields can not be empty!!
                </b>`;
            }
            else if (numberMin > numberMax) {
                result.innerHTML = `
                <b style='color: red'>
                    Minimum number must be less than 
                    Maximum number!!
                </b>`;
            }
            else {
                const n = (numberMax - numberMin) - 1;
                const firstVal = numberMin+1;
                sum = n/2*(2*(firstVal)+(n-1));
                result.innerHTML = `
                <b style='color: green'>
                    Sum of numbers between ${numberMin} 
                    and ${numberMax} is: ${sum}
                </b>`;
            }
        })
    </script>
</body>
 
</html>

Output:

rangeSumGIF

Suggest improvement

JavaScript Program to Find Sum of Odd Numbers in an Array

Share your thoughts in the comments

How to Sum all Numbers in a Range in JavaScript ?

Using the loops in JavaScript

Syntax:

HTML

Using the Arithmetic Series formula

Syntax:

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?