I created a page that will take a users input and then compare the input with a word. The idea is that the user has 6 chances to guess the word. If the user guesses the word or ran out of guesses the button clicked will change from Guess to Start a New Game. All that I got right.
The idea is then that the user will click the Start a Game button and the page will reset to original values, here is where I am having a problem. My button will change to the new value and the new id, but when I click the button the game still plays and then when I click it again and it does reset. Why is it not resting at the first click?
Here is how the part of the function looks
else if (theGuess.toLowerCase() == magicWord.toLowerCase())
{
//The user guesses the correct word
$("input[type=text]").ready(function () { $("#guestGuess").addClass("unblur"); });
$("input[type=submit]").val("Start a New Game");
$("input[type=submit]").attr("id","startNew");
$('#guestGuess').val('');
$('#startNew').click(function() {
location.reload();
});
magicWordResult = "Your guess was " + theGuess + "! Nice going!";
//document.writeln("Your guess was: " + guestGuess + "\nand the magic word is " + magicWord);
}
You can find the whole code here http://liveweave.com/psAsxh , if you run it you can see what is my problem.