JavaScript Program to Find Sum of n Numbers

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>
<head>
<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";
  }
}
function add()
{
  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>
</head>
<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="num"><button id="btn" onclick="add()">ENTER</button></p>
<p id="three" style="display:none;"><button onclick="res()">Add</button>
<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 »