 # JavaScript Program to Find Sum of n Numbers

« Previous Program Next Program »

In this article, you will learn and get code to add n numbers entered by user in JavaScript. Before creating the actual program, we've create a JavaScript code that shows how the program of adding n numbers looks like.

Here is the list of programs, you will go through:

• Add n Numbers. The value of n is already initialized with 5 and 5 numbers also initialized to an array say arr
• Add n Numbers entered by user. This program is created in a way to get input from user and then adds all the numbers entered by user. A live output of this program is also given

## Add n Numbers in JavaScript

This is just a simple JavaScript program that doesn't allows user to input the data. This program adds 5 numbers and writes the answer as an HTML output.

```<!doctype html>
<html>
<body>
<script>
var i, n=5, sum=0;
arr = new Array(10, 12, 13, 15, 19);
for(i=0; i<5; i++)
sum = sum + arr[i];
document.write(sum);
</script>
</body>
</html>```

Save this code in a file with .html extension and opens it in a web browser. Here is the output you will see:

### Get Input from User using TextBox

Now this program allows user to enter the data. That is, user is asked to enter the value of n say 5 and then again asked to enter 5 numbers.

```<!doctype html>
<html>
<script>
var i=0, n, sum=0, temp;
function fun()
{
n = parseInt(document.getElementById("n").value);
if(n)
{
document.getElementById("nVal").innerHTML = n;
document.getElementById("tme").innerHTML = i+1;
i++;
temp = document.getElementById("one");
temp.style.display = "none";
temp = document.getElementById("two");
temp.style.display = "block";
}
}
{
if(i==n)
{
temp = document.getElementById("two");
temp.style.display = "none";
temp = document.getElementById("three");
temp.style.display = "block";
}
num = parseInt(document.getElementById("num").value);
if(num)
{
sum = sum + num;
document.getElementById("num").value = null;
document.getElementById("tme").innerHTML = i+1;
i++;
}
}
function res()
{
document.getElementById("result").value = sum;
}
</script>
<body>

<p id="one">Enter the Value of n: <input id="n">
<button onclick="fun()">ENTER</button></p>
<p id="two" style="display:none;">Enter <span id="nVal"></span>
Numbers. Input No. <span id="tme"></span>:
<input id="result"></p>

</body>
</html>```

Here is the initial output produced by above program:

Now enter the value of n say 5 and click on the button, ENTER. After performing this, the output gets changed. Here is the snapshot:

Now:

• enter first number say 10 and click on `ENTER` button
• then second number say 12 and click on `ENTER` button
• third number say 13 and `ENTER` button
• fourth number say 15 and `ENTER`
• fifth number say 19 and `ENTER`

Here is the snapshot of the output after performing all the above task:

Finally click on Add button to print the sum of all the 5 numbers entered by user. Here is the snapshot after performing this:

The CSS code,

`style="display:none;"`

hides an HTML element. Because it is added in the paragraph with id, two. Then the paragraph with this id gets hidden.

When user clicks on the button, ENTER then a function, fun() gets called. The following statement:

`n = parseInt(document.getElementById("n").value);`

states that, the int (integer) value of an HTML element with id, n gets initialized to n. Because user enters 5 in the text box whose id is n. Therefore 5 gets initialized to n. So n=5

And the following JavaScript code of if statement:

`if(n)`

states that, checks whether n holds any value or it is empty. The following statement:

`document.getElementById("nVal").innerHTML = n;`

states that, the value of n gets printed in an HTML element with id, nVal. The following statement:

`temp.style.display = "none";`

states that, an HTML element whose id is stored in temp gets hidden. And the statement given below:

`temp.style.display = "block";`

states that, an HTML element whose id is stored in temp becomes visible.

#### Live Output of Above Program

Here is the live output produced by previous program:

Enter the Value of n:

JavaScript Online Test

« Previous Program Next Program »