I'm doing a JavaScript course at the moment. In one of the exercises, a number guessing game, the guess is entered into an html text-box. The function
checkNumber() is then exectued. In the initial version of the code the function is executed from the
onclick handler of a button. We were then told to replace this with an
onchange handler on the text-box itself.
The problem that I am having is that this works fine if I change the value then move out of the text-box by clicking another part of the page or hitting
tab, but if I hit
enter or
return, the function is executed but then the page seems to be re-loaded. I have confirmed this by placing an
alert box among the variables initialised at the top of the first script block (outside the functions). This then resets the game (executing
resetGame() from the code block at the end of the page).
This is happens in Epiphany as well as Firefox. Is there a way around it? Is this a bug? I don't remember it happening in Internet Explorer.
Edited to add
Nope. It happens in Internet Explorer as well. It is rather inconvenient, though. Is there something about how I've put the page together that makes this happen? Hitting return does seem to be the natural thing to do when you've filled in a text-box.
Code:
<html>
<head>
<title>Number Guessing Game</title>
<script type = "text/JavaScript">
var max
var count
var winFlag
alert("initialising") // to test program flow
var numberToGuess
var wrongGuesses = ""
var startFlag = 1
function checkNumber(Guess)
{
if ( validateGuess( Guess ) == false )
{
return false
}
count ++
document.getElementById("noGuess").value = count
if ( Guess == numberToGuess )
{
alert("You got it in " + count + "!")
winFlag = 1
}
else if ( Guess > numberToGuess )
{
wrongGuesses = wrongGuesses + "Lower! "
document.getElementById("directions").firstChild.nodeValue = wrongGuesses
}
else if ( Guess < numberToGuess )
{
wrongGuesses = wrongGuesses + "Higher! "
document.getElementById("directions").firstChild.nodeValue = wrongGuesses
}
}
function validateGuess( valueToValidate )
{
if ( isNaN( valueToValidate ) )
{
alert("You've got to enter a proper number \n" +
"for a chance of winning!")
return false
}
else if ( valueToValidate < 1 || valueToValidate > max )
{
alert( "Way out! Your number needs to be \n" +
"between 1 and " + max )
return false
}
return true
}
function resetGame(flag)
{
if ( flag == 1 )
{
count = 0
winFlag = 0
startFlag = 2
max = Math.floor( Math.random() * 1000 ) + 1
numberToGuess = Math.floor( Math.random() * max ) + 1
document.getElementById("numRange").firstChild.nodeValue = max
document.getElementById("noGuess").value = count
document.getElementById("directions").firstChild.nodeValue = ""
document.getElementById("guessBox").value = ""
wrongGuesses = ""
}
else if ( flag == 0 )
{
alert("Finish your game before you go resetting it!")
}
}
</script>
</head>
<body>
<h2>Number Guessing Game</h2>
<p>Enter a number between 1 and <span id='numRange'> </span>, and press return</p>
<p align = "center">Number of Guesses so far:
<input type = "text"
name = "noGuess" id = "noGuess"
size = "4"
readonly /></p>
<form name="f1" id="f1" action="">
Guess:
<input type="text" size="5"
id="guessBox" name="guessBox"
value = ""
onchange = "checkNumber(this.value)" />
<p align = "right"><input type="button"
name = "reset" id = "reset"
value = "Start a new game"
onclick = " resetGame(winFlag) " /></p>
</form>
<h3 id = "directions"> </h1>
<script type="text/JavaScript">
resetGame(startFlag)
</script>
</body>
</html>
Rob
