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>")