0

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

Improve this question
0

3 Answers 3

Reset to default
1

Just use location.reload(true) - this will cause the page to reload from server instead from cache. For reference: https://developer.mozilla.org/en-US/docs/Web/API/Location.reload

Update: Checked your game and still looking about the lines spoiling the result. I've just added console.log for the functions called on clicking #guess and #startNew, and the result is: after max guesses the #startNew function is called, but every next click calls both functions. There's a very easy (lazy?) approach to fix it without having to bother why the current code is not working - just add a 2nd button for #startNew, so instead of changing the functionality of a single button you would just change the visibility of two buttons. A different approach would be to call only one function on click without changing the button's id and have the function adjusted to handle a parameter - like function handleButton (value) {... } - and for the guesses it just handles the guess-part of the game, for the start-new it handles the start-new part - just calling handleButton("guess") and handleButton("new"). As you already coded this game I guess you can handle that ;)

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Even if I add the location.reload(true) I still have to click twice on the button for it to reload. I don't think my page is doing it from the cache.
Ok, I've just played your game twice and I think I know what you mean. Will take a look at the code, looks like it has something to do how you bind / unbind the click() event for the submit.
np, I just updated the answer and maybe will have a look at the current code tomorrow (as it's getting late here) to check if it's possible to switch between diff click()-events for an id-changed button; it's possible that this is a problematic approach that's not needed
1

I was able to fix it. Here is how I was able to make it run properly:

  • When the user ran out of guesses or guess the correct work the id of the submit button gets changed to startNew
  • Then I added a double condition to the empty text check where the code will check if the text box is empty but also the code will check if the id for the submit button is guestGuess.

That is where I was having issues because when I was clicking an empty window that part of the code was running as well.

I updated the code here http://liveweave.com/SZDKHz

Thank you so much for all the help.

Improve this answer

1 Comment

Glad you fixed it on your own - minor detail just to be sure: you'll fix the part with the counter accordingly? Currently when you start a new game it starts to count down from 0 (e.g. 2nd game 2nd wrong guess value -2 and so on).
0

I always used location.href = location.href, to refresh, but its pure JavaScript rather than jquery.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.