codescracker
javascript

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 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:

javascript program add n numbers

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:

add n numbers javascript

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:

add n numbers in javascript

Now:

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

find sum of n numbers javascript

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

javascript sum of n numbers

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 »



© Copyright 2021. All Rights Reserved.

CodesCracker