24+ JavaScript Factorial Calculator Examples

This post contains a total of 24+ Hand-Picked JavaScript Factorial Calculator Examples with Source Code. All the Factorial Calculators are made using JavaScript and some uses a little bit of css for styling.

You can use the source code of these programs for educational purpose with credits to the original owner.

Related Posts

Click a Code to Copy it.

1. By int24h

Made by int24h. JavaScript program to get the factorial of a number using loop. ( Source )


var x=prompt("Enter a number");
var i=1;
var y=x;
for (i=1;i<x;i++) {
    y=i*y;
}
alert (y);

2. By Nova I Outcast

Made by Nova I Outcast. Simple program to get the factorial of a number ( Source )

"use strict";
function factorial(n) {
    if (n>1) {
        return factorial(n-1)*n
    }
    else {
        return 1;
    }
}
alert (factorial(+prompt("","")).toLocaleString())

3. By Siddharth Saraf

Made by Siddharth Saraf. ( Source )

<!doctype html>
<html>

    <head>
        <title>
            Factorial
        </title>
    </head>

    <body>
        <script>
            var num = prompt("Please enter the number whose factorial you want to see"), factorial = 1
            for (i = 1; i <= num; i++) {
                factorial *= i
            }
            document.write("The factorial of " + num + " = " + factorial)
        </script>
    </body>

</html>

4. By Kostya Shavkunov

Made by Kostya Shavkunov. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
    <div id="demo"> Factorial of </div>
<script>
    
function Factorial(num) {
    let result = 1;
    while(num > 0) {
        result *= num;
        num--;
    }
    return result;
}
var elem = document.getElementById("test");


//console.log(Factorial(number));
window.onload = function(){
    var number = prompt("Please enter number");
     var x = document.getElementById("demo");
        x.innerHTML = x.innerHTML + number+ " is: " + Factorial(number);
        x.style.color = "6600FF";
}
    </script>
    </body>
</html>

5. By Sayan Kundu

Made by Sayan Kundu. Enter a integer at the left input box and click the ‘Find Factorial no’ button to get its factorial. ( Source )

<html>
<head>
<title>Factorial Number</title>


</head>
<body bgColor="#87CEFA">
<i>
<font color="blue">
<h1><center>Factorial ( N! ) Number</center></h1>
<hr>
<br>
<h2>
<pre>
<form color="blue" name="frmtst">
<center>
Give Value: (<input type="text" placeholder="ENTER A VALUE" name="numtxt" style="text-align:center;font-size:12pt;width:400px" />)! =  <input type="text" name="resulttxt" readonly style="text-align:center;font-size:12pt;width:400px"> : Result

			<input type="button" value="Find Factorial No"onClick="Factorialno();" style="color: DarkOrchid4; background-color:lightgreen; border: 3pt ridge lightgrey">

<br><br><br>
<input type="reset" value="Reset">
</center>
</pre>
</h2>
</form>
</font>
</i>
<script>
    function Factorialno()
{		
	var i,f,num,sum=0;
	num=parseInt(frmtst.numtxt.value);
	if(isNaN(num))
	{
		alert("Give a value.");
		frmtst.resulttxt.value="";
		return;
	}
	f=1;
	for(i=1;i<=num;i++)
	{
		f*=i;
	}
	frmtst.resulttxt.value=f;
}
    </script>
</body>
</html>

6. By Aaditya Deshpande

Made by Aaditya Deshpande. JavaScript factorial finder using recursion and stack trace. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
    <center>Stack Trace is there in console</center>
     <center>This was a normal recursion<br><a href="https://code.sololearn.com/WO7g6fS1FlkS/?ref=app">Study Tail Recursion</a></center>   
    <script>
        var temp

var inp = prompt ("Number to find factorial",5);
 inp= Number(inp);

console.log("values retured is here in console");

var a = function func(num){

    //alert("num in func " + num)
    
    if(num==0||num==1) 
    {   console.log("limiting condition reached \nreturned values are");
        console.log(1);
        return 1;
    }
    else
    {
      console.log(temp =num * func(num-1));
      return temp;
    }
}(inp); //170 limit

alert("finally factorial of a is => "+a);
        </script>
    </body>
</html>

7. By Farhan A Hanfee

Made by Farhan A Hanfee.

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <script>
            var fact = 4
            for(a=1;a<=10;a++)
            //factorial of 10
            {
                document.write(fact = fact*a)
                document.write("<br>")
            }
            alert("check out my other code also thanks for viewing my code :D");
        </script>
    </head>
    <body>
        
    </body>
            </html>

8. By Mwikisa Kapesa Lufungulo

Made by Mwikisa Kapesa Lufungulo. ( Source )

function factorial(number){
	if(number ==1){
		return number
	}
	else{
		return number * factorial(number - 1)
	}
}

number = prompt("Enter a Number")
document.write(factorial (number))

9. By Tanguy P. WAMINA

Made by Tanguy P. WAMINA. Enter a number at the input field and click the n button to get the factorial of that number. The program will also show how it got the answer. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Factorial</title>
    <style>
        body {
    
}
#result{
   height:300px; 
   overflow:scroll;
   box-shadow:3px 3px 10px blue;
   width:90%;
   padding:2px;
   margin:5%;
}
        </style>
    </head>
    <body>
        <p>n! = n*(n-1)! = n*(n-1)*(n-2)*...*(n-m)*1</p>
        <div id="result">
           
        </div><br />
        <form>
        <label for="valeur">enter an integer </label><input id="valeur" type="text" name="valeur" />
        </form>
        <button id="calcul" onClick="fact('valeur')">n!</button>
    <script>
        function fact(m){
   var n = document.getElementById(m).value;
   var proc ="";
   var facto = 1;
   
   if(n<0)
     return;
   
   for(var i=n; i>1; i--){
       facto *= i;
       if(i>=2)
         proc += i+"*";
   }
   proc +=1
     
   var p = document.createElement("p");
   var texte = document.createTextNode(n+"! = "+proc+" = "+facto);
   p.appendChild(texte);
   document.getElementById("result").appendChild(p);
   
document.getElementById(m).value = ""
}
        </script>
    </body>
</html>

10. By Rstar

Made by Rstar. Simple JavaScript program to convert a number to factorial. Enter your number in var x=4;. ( Source )

function recursion (x)
{
    return ((x==1 || x==0)?1:recursion(x-1)*x);
}
var x=4;
document.write(recursion(x));

11. By Matheus Sanches

Made by Matheus Sanches. Enter your number in the prompt and get the factorial. ( Source )

var f = prompt("Enter a natural number:");
var f2 = f;
var re = 1;
for(;f >=1;f--){
    re *= f;}
alert("The factorial of " +f2 +"  is: "+re);

12. By Jahnics

Made by Jahnics. You have to enter the number you want the factorial of, and after that click the factorialize button. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Factorial</title>
    </head>
    <body>
        <input id="number" type="number" min="0" step="1" placeholder="Enter the number">
        <button onclick="fac()">Factorialize</button>
        <br />
        <output id="ans"></output>
        <script>
            function fac() {
    var n = document.getElementById("number").value;
    if (n != undefined && n != "") {
        var f = 1;
        for (var i = 2; i <= n; i++) {
            f *= i;
        }
        document.getElementById("ans").innerHTML = "Factorial of " + n + " is " + f;
    }
}
            </script>
    </body>
</html>

13. By Suzie

Made by Suzie. Change the number in line document.write(factorial(5)); ( Source )

const factorial = function (n){
   if (n===0) {
   return 1;
  }
   return n*factorial (n-1);
}
document.write(factorial(5));

14. By Code_Almighty

Made by Code_Almighty. Clicking the button will open the prompt where you will need to enter the number you want the factorial of. ( Source )

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
        <style>
            body {
    	    background: #3a3939;
    }
    
	h1 {
    	color: white;
        margin: 5px 20px;
        padding: 5px;
    }
    
    div {
    	border: 10px solid rgb(0,0,0);
    }
    
    p {
    	max-height: 200px;
    	font-size: 16px;
    	color: #999;
        padding: 3px 15px;
    	background: rgba(0, 0, 0, 0.3);
    }
    
    #demo {
    	font-weight: bold;
    	color: white;
        font-size: 17px;
    }
    
    button {
    	margin: 5px 15px;
    	font-size: 15px;
    	border: none;
		padding: 12px;
        background: #03a9f4;
        color: white;
        cursor: pointer;
	}
    
    button:hover {
    	color: #03a9f4;
        background: white;
    } 
            </style>
	</head>
	<body>
		<h1>Factorial</h1>
        <div>
            <p id="prompt">Click the button to open the input box.</p>
            <button onclick="myFunction()">Click to enter a number</button>
            <p id="demo"></p>
        </div>
        <script>
            
function myFunction() {
    var num = prompt("Please enter a number", 1);
    if (num !== null){
    document.getElementById("demo").innerHTML = factorial(num);
    }
}

function factorial(number) {
    	if(number === 0 || number === 1) {
        	return 1;	
        } else {
        	return number * factorial(number -1);
          }
}

            </script>
	</body>
</html>

15. By Swapnil More

Made by Swapnil More. ( Source )


var n=prompt("Enter a number");
var a=1;
for(var i=1;i<=n;i++)
    a*=i;
alert("Factorial of "+n+" is "+a);

16. By Shawn Gillis

Made by Shawn Gillis. ( Source )

function factofunc(n) {
    if(n == 0){
        return 1;
    } else {
        return factofunc(n - 1) * n;
    }
}
console.log(factofunc(10));

17. By Ellen Julian Costa

Made by Ellen Julian Costa. Enter a number then click the button to get its factorial. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    <style>
        * {
 margin:0;
 padding:0;
 font-family:cursive;
 font-size:25px;
}

html {
 height:100%;
}

body {
 background:linear-gradient(322deg,#ba4aff,rgba(186, 74, 255,0)70%),
 linear-gradient(178deg, #008aff, rgba(0, 136, 255,0)70%),
 linear-gradient(24deg, #00ffc6, rgba(0, 255, 200,0)35%);
}

.box {
 --size:6rem;
 color:#fff;
 width:80%;
 padding:15px;
 margin:50% auto;
 text-align:center;
 border:1px solid rgba(255,255,255,.6);
 border-radius:0.5rem;
 background:rgba(255,255,255,0.1);
 backdrop-filter:blur(90px);
 box-shadow:0px
 calc(var(--size)/6)
 calc(var(--size)/3)
 rgba(0,0,0,.1);
}

input {
 background:none;
 color:white;
 width:10%;
 border:1px solid rgba(255,255,255,.6);
 border-radius:10px;
 padding:3px;
 outline:none;
 text-align:center;
}

button {
 background:none;
 color:#fff;
 border:1px solid rgba(255,255,255,.6);
 padding:5px;
 border-radius:10px;
 outline:none;
}

p {
    margin-top:10px;
    word-break:break-all;
}
        </style>
    </head>
    <body>
    
        <div class="box">
            <label for="number">Enter a number: </label><input type="number" id="number"/>
            
            <button class="btn" onclick="factorial()">Factorial</button>
            
            <p id="answer">Factorial of... </p>
        </div>
        <script>
            function factorial() {
    const number = parseInt(document.getElementById("number").value);
    const answer = document.getElementById("answer");
    
    if (isNaN(number)) {
        answer.innerHTML="The input is null. Enter a number!"
    } else if (number < 0) {
        answer.innerHTML="There is no factorial of an unnatural number.";
    } else {
    
    var result = 1;
    
    for (var i = 1; i <= number; i++) {
        result *= i;
    }
    
    var str="";
    for (var i=number;i>=1;i--){
        if(i>1) {
            str+= i+"x"
        } else {
            str+= i+"="
        }
    }
    
    answer.innerHTML=`Factorial of ${number} is <br> ${str}${result}.`;
    }
}
            </script>
    </body>
</html>

18. By hanen mdaghi

Made by hanen mdaghi. JavaScript program to get the factorial of a integer, the program is also styled using css. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    <style>
        body{
    text-align:center ;
    font-size:30px;color:blue;padding:20px;
    line-height:40px;
    animation-name:playground;
    animation-duration:3s;
    animation-iteration-count:infinite;

}
@keyframes playground{
   0%  {background-color:orange;}
   50%  {background-color: yellow;}
   70%  {background-color: silver;}
   100% {background-color:aqua;}
}
        </style>
    </head>
    <body>
       <script>
           var n;
fact =1;

alert ("hello!this  function calculate the  factorial of positive Number" )
do{ 
n=parseInt(prompt ("give a positive integer"))}while ((isNaN(n))||(n<0));
i=2;
do
{
   fact=fact*i;
   i++;
}
while (i<=n);
document.write('<h2>factorial('+n+')=</h2> <h3>'+fact+'</h3> <br>');


           </script>
    </body>
</html>

19. By Faisal

Made by Faisal. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    <style>
        body {
    background-color: #aa0000;
}

#factorial{
    color: #0000aa;
    font-size: 25px;
    font-family: "Times New Roman";
}

#reeee{
    text-align: center;
    font-family: "Times New Roman";
}
        </style>
    </head>
    <body>
        <script>
            window.onload = iamfunction();

function iamfunction(){
    document.write("<h1 id = 'reeee'>Factorials :D</h1>")
    x = prompt("Enter a number");
    y = x - 1;
    z = 1
    a = x
    
    while(z < a){
        x *= y;
        y -= 1;
        z += 1;
    }
    
    document.write("<div id = 'factorial'>" + a + "! = " + x + "</div>");
}
            </script>
    </body>
</html>

20. By Paul

Made by Paul. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
      <h1>  Factorial </h1>
      <script>
          var i = prompt("Enter a Number");
var t = 1;

for(var y=i; y>0; y--){
 t=t*y;
}
 document.write(i +" "+ "factorial is" +" "+t)
          </script>
    </body>
</html>

21. By TwoTwo

Made by TwoTwo. ( Source )

a=prompt("write a no. to obtain its factorial");
s=1;
for(i=a;i>0;i--)
s=s*i;
document.write(s);

22. By Stargazer

Made by Stargazer.

<!DOCTYPE html>
<html>
    <head>
        <title>Factoralize That</title>
    </head>
    <body>
        <p>Check the javascript tab</p>
    <script>
        
function fct(num) {
   var n = num;
   var result = 1;
   for (i = 0; i < n - 1; i++) {
       result *= num;
       num--;
   }
   return result;
};
        </script>
    </body>
</html>

23. By β–‘Sβ–‘Mβ–‘Iβ–‘Tβ–‘Hβ–‘

Made by β–‘Sβ–‘Mβ–‘Iβ–‘Tβ–‘Hβ–‘. ( Source )

// Ρ†ΠΈΠΊΠ»

function factorial() {
   
   var result = 1;
   var number = prompt('Enter a number...', '');
   
   for (var i=1; i <= number; i++) {
      result *= i; 
   }
   return 'Factorial of ' + number + ' is ' + result;
}

alert ( factorial() );





// рСкурсия

function factorial_2(x) {
   
   if (x > 1) return x * factorial_2(--x);
   return x;
}

alert ('Factorial of this number is ' + factorial_2(prompt('Enter a number...')));

24. By R YUVARAJ

Made by R YUVARAJ. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <script>
            body {
   
    background-image:url("content://com.android.chrome.FileProvider/images/screenshot/1616518354672879243501.jpg");    
     background-repeat:no-repeat ;
    background-size:400px 550px;


}

h2,b{
    font-color: white;
     color: white;
  text-shadow: 2px 2px 4px #000000;
}
button{

color: block ;
  text-shadow: 2px 2px 4px #000000;
  }
  
}

            </script>
    </head>
    <body>
    <center>
        
       
 <img src="https://1.bp.blogspot.com/-Ifow49lZDno/WXzRrn2cg8I/AAAAAAAAAKk/_eUtQ_BNXuwAoMfvzEId8LkvKvb2zshNwCLcBGAs/s1600/Factorial.png" width="350" height="220">
     
 <h2>Factorial Number</h2> 
       </center><br />
       <b>Enter the factorial number<br/>
           {
       <b/>
       <br /><br />
       <input type="number" name="num" id="N" placeholder="Enter the factorial number">
       <br /><br />}<br/><br /><br />
       <center><button onclick="factorial()">Click Here</button></img>
    </center>
    <script>
        function factorial()
{
    var num,swapp,i;
      num=Number(document.getElementById("N").value);
   swapp=parseInt(num);
   for(i=1;i<num;i++) 
   {
       swapp=swapp*i;
   }
   num=" ";
   window .alert ("Factorial value is "+swapp);
   
}
        </script>
    </body>
</html>

25. By Sergey Petrov

Made by Sergey Petrov. ( Source )

var num = prompt("Please enter your number");
factorial = 1;
i = 0;
while (i<num){
    i+=1
    factorial=factorial*i
        }
document.write("<h1>Factorial of ");
document.write(num);
document.write(" is: ")
document.write(factorial);
document.write("</h1>")