Factorial Page (Event Listeners)

Factorial Page (Event Listeners)
0

#1

I’m trying to create a simple, static webpage that calculates the factorial of whatever number is entered by the user. They should be able to enter some number and press the “enter” key to have the answer just appear on the webpage. It’s not working, however. How do I make it work? Also, I’m new to using event listeners so I would greatly appreciate any advice on the best way to write the code for them. Here’s the code:

HTML:

<!Doctype html>
<html>

	<title>
		Factorials
	</title>
	
	<style>
		
		body
		{
			margin: 0;
			background-color: #33d6ff;
		}
		
		#TopPart
		{
			height: 80px;
			width: 100%;
			background-color: blue;
		}
	</style>
	
	<head>
		
	</head>
	
	<body>
		
		<div id = "TopPart">
			<h1><em>Factorials</em></h1>
		</div>
		
		<p>
			The factorial is an operation in which </br>
			a number is multiplied by the factorial </br>
			of itself minus 1. This is a recursive </br>
			operation, of course, because it calls </br>
			itself. The factorial of 1 is 1. That's </br>
			all you need to know to calculate the </br>
			factorial of a number. Let's try it!
		</p>
		
		<input type="text" id = "enteredNum" width = "15px">! = <p id = "getFactorial"></p> <script src = "Practice_Javascript.js"></script>
	</body>
</html>

Javascript:

calculateFactorial()
{
	var num = parseFloat(document.getElementById("enteredNum").value) || 0;
	var factorial;
	
	if(num === 0)
	{
		factorial = 0;
	}
	
	else if(num === 1)
	{
		factorial = 1;
		return factorial;
	}
	
	else
	{
		factorial *= calculateFactorial(num - 1);
		return factorial;
	}
	
}

document.addEventListener('keyup', (event) => {
	const keyName = event.key;
	
	if(keyName == 13)
	{
		document.getElementById("getFactorial").innerHTML = calculateFactorial();
	}
}, false);

#2

First, here is the documentation for addEventListener.

Secondly, I see you’re including your factorial function. That should be fine. What you need to do is somehow display the result of that function on the page. You can modify your function to output the result to an element on the page, or you can just use the return value into your element target.

It looks like you have all that, you’re missing one thing it looks like, your calculateFactorial is not being passed an integer to work on.

You can do two things, instead of adding this event on the document, add it on the input element the user is typing into. This will lsiten for keypres, and if your keypress is the enter key (while this element is selected) it will fire this event. What you can then do is use the event to target this input element directly using event.target.value.

Then pass this value through into your calculateFactorial(event.target.value))

Oh wait, I see what you’re doing. Your factorial function is all wrong. You should not write functions that reach out into your webpage. Functions should only act on parameters passed through to them. Use my above suggestion with this function

function calculateFactorial( num ){
  var factorial = 1;
  for( a = 2; a <= num; a++ ){
    factorial *= a;
  }
  return factorial;
}

And pass in your value like

document.getElementById("getFactorial").innerHTML = calculateFactorial( event.target.value );

The function will output the factorial and innerHTML will assign it.


#3

I was using recursion for my function. Anyway, your suggestion didn’t quite work. Is there possibly smething wrong with my html? Here’s the javascript modification I made:

calculateFactorial(num)
{
	//var num = parseFloat(document.getElementById("enteredNum").value) || 0;
	var factorial = num;
	
	if(num === 0)
	{
		factorial = 0;
	}
	
	else if(num === 1)
	{
		factorial = 1;
		return factorial;
	}
	
	else
	{
		factorial *= calculateFactorial(num - 1);
		return factorial;
	}
	
}

document.addEventListener('keyup', (event) => {
	const keyName = event.key;
	
	if(keyName == 13)
	{
		document.getElementById("getFactorial").innerHTML = calculateFactorial(event.target.value);
	}
}, false);

#4

In your above code, you have:

const keyName = event.key;
	
if(keyName == 13)

The code to display the factorial calculation will not execute, because you are looking for a event.key of 13. I am not aware of such a thing. Maybe you meant event.keyCode? A keyCode of 13 is the Enter key.


#5

I made the change. It still doesn’t work. Any other ideas?


#6

Can you repost your entire code? Also, did you check your console (Ctrl+Shft+I in chrome) for errors?


#7

Here’s the html:

<!Doctype html>
<html>

	<title>
		Factorials
	</title>
	
	<style>
		
		body
		{
			margin: 0;
			background-color: #33d6ff;
		}
		
		#TopPart
		{
			height: 80px;
			width: 100%;
			background-color: blue;
		}
	</style>
	
	<head>
		
	</head>
	
	<body>
		
		<div id = "TopPart">
			<h1><em>Factorials</em></h1>
		</div>
		
		<p>
			The factorial is an operation in which </br>
			a number is multiplied by the factorial </br>
			of itself minus 1. This is a recursive </br>
			operation, of course, because it calls </br>
			itself. The factorial of 1 is 1. That's </br>
			all you need to know to calculate the </br>
			factorial of a number. Let's try it!
		</p>
		
		<input type="text" id = "enteredNum" width = "15px">! = <p id = "getFactorial"></p> <script src = "Practice_Javascript.js"></script>
	</body>
</html>

Here’s the javascript:

calculateFactorial(num)
{
	//var num = parseFloat(document.getElementById("enteredNum").value) || 0;
	var factorial = num;
	
	if(num === 0)
	{
		factorial = 0;
	}
	
	else if(num === 1)
	{
		factorial = 1;
		return factorial;
	}
	
	else
	{
		factorial *= calculateFactorial(num - 1);
		return factorial;
	}
	
}

document.addEventListener('keyup', (event) => {
	const keyName = event.keyCode;
	
	if(keyName == 13)
	{
		document.getElementById("getFactorial").innerHTML = calculateFactorial(event.target.value);
	}
}, false);

#8

I just now did the error check. It says illegal return statement. What does that mean? This exact function worked well in the “Factorialize a Number” freecodecamp challenge.


#9

I thought when you posted your original code, you just had not copied all of your code, but then I see your latest version and sure enough you are still missing your function declaration for calculateFactorial. Fix that and you are good to go.


#10

What do I put as the parameter? My function accepts a parameter. Also, I didn’t know I still had to call the function. I thought it was called through the event listener or something. Could you demonstrate what you mean?


#11

Oh wait, nevermind! You meant add the word ‘function’ before the actual function! That fixed it, thanks!