setTimeout IE problem?

[4fit?]

Hi all. I am working on a project for one of my clases. The assignment is to create a guessing game where the user enters a guess between 1 and 100 and so on and so on. When the original number is generated or when a new number is generated, the user has 10 seconds to make their initial guess. If 10 seconds passes without a guess, a confirm box is displayed asking if the user wants to continue with the game or exit. I handle this using setTimeout.

Everything works great in FF and Netscape, but the setTimeout never fires for me in IE. Could you all have a look at the code and let me know if you spot an issue. Thanks in advance!!

		<script type="text/javascript">
			<!--
			// declare variables
			var num = 0 // stores the randomly generated number
			var t // variable for setTimeout
			var counter = 0 // stores the number of valid guesses made
			// small function to clear the user's guess and set focus back to text area
			function clearGuess() {
				document.frmGuess.userGuess.value = "";
				document.frmGuess.userGuess.focus();
			}
			// function to generate the random number between 1 and 100
			function generateNum() {
				setTimer();
				clearGuess();
				counter = 0;
				num = Math.round(Math.random() * 100);
			}
			// function to handle the users guess
			function guess() {
				clearTimeout(t);
				var userGuess = parseInt(document.frmGuess.userGuess.value);
				// tell the user if they do not enter a number between 1 and 100
				if (userGuess < 1 || userGuess > 100) {
					window.alert("You must enter a number between 1 and 100");
					clearGuess();
					return false;
				}
				// tell the user if they do not enter a numeric value
				if (isNaN(userGuess)) {
					window.alert("You must enter a numeric value");
					clearGuess();
					return false;
				}
				// increment the counter and set the text to use depending on count
				++counter
				if (counter == 1) {
					var guessString = " guess";
				}
				else {
					var guessString = " guesses";
				}
				// congratulate the user if they guess the correct number and ask if
				// they want to play again
				if (userGuess == num) {
					result = confirm("Correct!!!!!!  " + userGuess + " was the number and "
						+ "it only took you " + counter + guessString + "!!\n\n"
						+ "Click OK to play again or Cancel to exit the game.");
						if (result) {
							generateNum();
						}
						else {
							window.close();
						}
				}
				// tell the user if their guess is greater than the target number
				else if (userGuess > num) {
					alert("Less than " + userGuess);
					clearGuess();
				}
				// tell the user if their guess is less than the target number
				else {
					alert("Greater than " + userGuess);
					clearGuess();
				}
			}
			// function to start a 10 second counter.
			function setTimer() {
				t = setTimeout("contin()",10000);
			}
			// if user does not make a guess in 10 seconds, they are asked if they would like to exit
			// the game or continue playing
			function contin() {
				result = confirm("Do you wish to exit this game?  Click OK to exit "
					+ "or Cancel to continue play.");
				if (result) {
					window.close();
				}
				else {
					generateNum();
				}
			}
			-->
		</script>

[pcbrainbuster]

Hello,

I did not quite read the script because well i am sorry but i don't do good reading long scripts (gets me really bored) but it seems that you do need a little setTimeout help for it - I will just give a good example (though i have no idea if it is any good ) -

var (variable name)=setTimeout("prompt('Would you like to continue, YES or NO')",10000)

This script should actuall load after 10 seconds but the if statments were not added (just give me SHORT details of what you need and i will set/do it for you.

[jscheuer1]

Your code looks OK but, there may be problems with IE confusing variable names with element objects in the implied document.all collection. To tell if this is the case or if there is some other problem, I would need to see the markup that goes with the script.

[4fit?]

Your code looks OK but, there may be problems with IE confusing variable names with element objects in the implied document.all collection. To tell if this is the case or if there is some other problem, I would need to see the markup that goes with the script.

Here is the entire markup. Thanks for taking a look.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>Guessing Game</title>
		<!--
		The following JavaScript program generates a random number between 1 and 100.
		The user then enters their guess at that number.  They receive messages to help
		them get to the generated number and are congratulated when they get it correct and
		are asked if they would like to play the game again.  If they click OK, a new number is
		generated and the game starts all over again.  If they click Cancel, the application closes.
		If, after a new number is generated, the user does not make a guess for 10 consecutive seconds,
		a message will be displayed asking if the user wants to continue play or if they want to exit
		the game.  If they select to continue play, a new number will be generated.
		-->
		<style type="text/css">
			body {
				text-align: center;
				background-color: #d1d1d1;
			}
			.guessEntry {
				text-align: center;
			}
		</style>
		<script type="text/javascript">
			<!--
			// declare variables
			var num = 0 // stores the randomly generated number
			var t // variable for setTimeout
			var counter = 0 // stores the number of valid guesses made
			// small function to clear the user's guess and set focus back to text area
			function clearGuess() {
				document.frmGuess.userGuess.value = "";
				document.frmGuess.userGuess.focus();
			}
			// function to generate the random number between 1 and 100
			function generateNum() {
				setTimer();
				clearGuess();
				counter = 0;
				num = Math.round(Math.random() * 100);
			}
			// function to handle the users guess
			function guess() {
				clearTimeout(t);
				var userGuess = parseInt(document.frmGuess.userGuess.value);
				// tell the user if they do not enter a number between 1 and 100
				if (userGuess < 1 || userGuess > 100) {
					window.alert("You must enter a number between 1 and 100");
					clearGuess();
					return false;
				}
				// tell the user if they do not enter a numeric value
				if (isNaN(userGuess)) {
					window.alert("You must enter a numeric value");
					clearGuess();
					return false;
				}
				// increment the counter and set the text to use depending on count
				++counter
				if (counter == 1) {
					var guessString = " guess";
				}
				else {
					var guessString = " guesses";
				}
				// congratulate the user if they guess the correct number and ask if
				// they want to play again
				if (userGuess == num) {
					result = confirm("Correct!!!!!!  " + userGuess + " was the number and "
						+ "it only took you " + counter + guessString + "!!\n\n"
						+ "Click OK to play again or Cancel to exit the game.");
						if (result) {
							generateNum();
						}
						else {
							window.close();
						}
				}
				// tell the user if their guess is greater than the target number
				else if (userGuess > num) {
					alert("Less than " + userGuess);
					clearGuess();
				}
				// tell the user if their guess is less than the target number
				else {
					alert("Greater than " + userGuess);
					clearGuess();
				}
			}
			// function to start a 10 second counter.
			function setTimer() {
				t = setTimeout("contin()",10000);
			}
			// if user does not make a guess in 10 seconds, they are asked if they would like to exit
			// the game or continue playing
			function contin() {
				result = confirm("Do you wish to exit this game?  Click OK to exit "
					+ "or Cancel to continue play.");
				if (result) {
					window.close();
				}
				else {
					generateNum();
				}
			}
			-->
		</script>
	</head>
	<body onload="generateNum();">
		<h2>Guess the computer's number</h2>
		<h4>Enter your guess (between 1 and 100) in the area below and click <tt>Guess</tt></h4>
		<form name="frmGuess" action="">
			<input class="guessEntry" type="text" name="userGuess" />
			<br /><br /><br />
			<input type="button" name="submitGuess" value="Guess" onclick="guess();" />
			&nbsp;&nbsp;&nbsp;
			<input type="button" name="generateNew" value="New Number" onclick="generateNum();" />
			&nbsp;&nbsp;&nbsp;
			<input type="button" name="exit" value="Exit Game" onclick="window.close();" />
		</form>
	</body>
</html>

[jscheuer1]

OK, here is what I saw happening. The script worked identically in Opera, FF and IE however, it's not real well thought out. Here is what happened in all three browsers:

• You load the page and if you don't guess in 10 seconds, you get the confirm.
  
• If you choose to continue, you get a new number and a new 10 seconds.
  
• If you do guess and the guess is wrong, you can wait forever and there will be no prompt.

I think that if you choose to continue, you should keep the same number and the timeout should be reset.

[4fit?]

OK, here is what I saw happening. The script worked identically in Opera, FF and IE however, it's not real well thought out. Here is what happened in all three browsers:

• You load the page and if you don't guess in 10 seconds, you get the confirm.
  
• If you choose to continue, you get a new number and a new 10 seconds.
  
• If you do guess and the guess is wrong, you can wait forever and there will be no prompt.

I think that if you choose to continue, you should keep the same number and the timeout should be reset.

I couldn't agree more, and that is actually the way that I initially coded it. But that is the way that the instructor wanted it done.
So, it worked fine for you in IE? The program itself works fine for me in IE with the exception of the setTimeout portion. Welp, thanks for looking into it for me!

[jscheuer1]

if I were you, I would go back over the instructions for the assignment carefully and see if there was any way that they could be interpreted to allow you to code it the way that you want.

If not, I would try coding it as instructed but also do it 'my way' and turn in both methods. I would say that the first one 'followed the instructions' but that the second one seemed like a better way to do it.

[mburt]

To make sure there are no screw-ups, do so from a global scope:

var (variable name)=setTimeout(function() {prompt('Would you like to continue, YES or NO')},10000)

[jscheuer1]

		<script type="text/javascript">
			<!--
			// declare variables
			var num = 0 // stores the randomly generated number
			var t // variable for setTimeout
			var counter = 0 // stores the number of valid guesses made
			// small function to clear the user's guess and set focus back to text area
			function clearGuess() {
				document.frmGuess.use . . .
                                                . . . ess();
				}
			}
			// function to start a 10 second counter.
			function setTimer() {
				t = setTimeout("contin()",10000);
			}
			// if user does not make a guess in 10 seconds, they are asked if they would like to exit
			// the game or continue playing
			function contin() {
				result = confirm("Do you wish to exit this game?  Click OK to exit "
					+ "or Cancel to continue play.");
				if (result) {
					window.close();
				}
				else {
					generateNum();
				}
			}
			-->
		</script>

To make sure there are no screw-ups, do so from a global scope:

var (variable name)=setTimeout(function() {prompt('Would you like to continue, YES or NO')},10000)

The timeout is already in the global scope and there is no problem with it firing when it is set and given time to run out. The problem is that it is only set once per number generation. If it were also cleared and reset after each incorrect guess, it would work out much better.

I think 4fit? got confused when testing the code in the various browsers as, there are various branches one can go down in the code, depending upon what one does in the game. If you take one branch in one browser and another branch in another, it can seem as though the execution is different between different browsers but, it is not.