When programs involve a lot of mathematical equations they’ll occasionally require you to put in the factorial of a number. If it’s a pre-set number you can just look up its factorial and that’s the end of that. However there’s going to be times where you don’t know what the number is ahead of time so you’re better off instead creating a reusable function that can determine a number’s factorial.
HTML Set-up
Before you can write your script you need to have set up a basic HTML document to run it on. For the purposes of this article I’m just going to create a very bare bones document that just has the essentials for the program but feel free to make it as fancy as you like.
Start off with the basic set-up for a document, no need for an external CSS or a title tag for this.
<DOCTYPE html> <html> <body> </body> </html>
Inside the body of your document you should first create a text area, be sure to give it an ID so you can identify it with JavaScript later. Above the text area you may want to put a header which directs user’s to enter a number into the box.
<h1>Enter in a Number</h1> <textarea type="text" id="textField"> </textarea>
Now insert a button next to the text area. When clicked this button should run the function that’ll calculate the factorial of the number currently within the text box.
<button onclick="Factorial()">Get the Factorial</button>
Finding a Factorial
First you should create the “Factorial” function mentioned in the previous section. Inside the function you need to get the number that was entered into the text field. To do this use the standard “document.getElementById()” but add the “.value” method at the end.
function Factorial(){
var number = document.getElementById('textField').value;
You’ll also need another variable that’ll hold the factorial of “number”. This should be set to one since in this program we’ll be starting the factorial calculation at one,
var factorial = 1;
Next you need to check if “number” is equal to or less than zero and return “undefined” if it is. The reason for this is that a negative number being entered into the for loop we’re about to create would completely break the program.
if (number<=0){
factorial = "Undefined";
}
Lastly you should set up a for statement which iterates through the user’s number. In this statement “factorial” should be multiplied by whatever the current count of the for loop is, This loop should return the factorial of “number” when it finishes running.
for(var i = 1; i <= number; i++){
factorial *= i;
}
document.getElementById('textField').value = factorial;
And now you’ve finished this simple factorial calculator.
Further Suggestions
Due to JavaScript being limited to 53 bit integers you’ll find that this factorial calculator will just simply return “infinity” for any input higher than 170. If you want to rectify this issue then I recommend you try playing around with either the jsbn library or the Big Number library which both include ways of interacting with very large numbers in JavaScript.
Good Luck!
Download the above source code here.
If you have any questions or comments email them to me at nick@crumbsofcode.com
