0

jQuery

$(document).ready(function(){ 
    var guess;
    $('#submit').on("click", function() {
        guess = $('#guess-value').val();
        $("#value").text(guess);
        alert(guess);
    });
    alert(guess);
});

HTML

<div id='game'>
    <form id='user-input'>
        <input type='text' id='guess-value' placeholder='1-100'></input>    
        <button id='submit'>Submit</button>
    </form>

    <h4 id='guess-count'>Attempts left: <span id="attempts">6</span></h4>       
</div>

<h4 id='checker'>The value entered is <span id="value">?</span></h4>

I've provided snippets of my HTML and jQuery code above. I am trying to store a number that has been entered into a text field, into a jQuery variable called guess after pressing a submit button.

The following happens occurs: When I enter a number into the field and press submit, I get an alert showing the value I entered. After closing the event I get another alert that is supposed to show the value of 'guess' and the value is undefined.

This happens even though I declared the variable guess outside of the click event. Why is this and how do I permanently store the value?

Improve this question
3
  • 1
    the 2nd alert is shown before you submit, not after; it's only because the page reloads that it seems later. if you didn't submit, you should see only one alert each click, and one upon ready(), which would show undefined as a value hasn't been set yet at boot-time. Commented Jun 7, 2014 at 18:54
  • 1
    what do you mean permanently? because when page is loaded or unloaded you will lose any data in the javascript variable. Commented Jun 7, 2014 at 18:55
  • I want to store the number entered so I can determine if it's equal to some random number. It's a guessing game. Commented Jun 7, 2014 at 18:57

3 Answers 3

Reset to default
4

You are using a <form> element to ask for user input. The problem with a form, is that when it submits, it wants to navigate away from (or refresh) the page. When the page refreshes, all js is lost.

Simple fix: don't use a form (you can use a DIV instead).

Alternatively, you can tell the form to NOT do its default action of submitting by using event.preventDefault():

jsFiddle Demo

HTML:

<div id='game'>
    <form id='user-input'>
        <input type='text' id='guess-value' placeholder='1-100'></input>
        <button id='submit'>Submit</button>
    </form>
     <h4 id='guess-count'>Attempts left: <span id="attempts">6</span></h4> 
</div>

<h4 id='checker'>The value entered is <span id="value">?</span></h4>

<input type="button" id="myButt" value="Show Value" />

jQuery:

var guess;
$('#submit').on("click", function (evnt) {
    guess = $('#guess-value').val();
    $("#value").text(guess);
    alert(guess);
    evnt.preventDefault();
});

$('#myButt').click(function(){
   alert( guess ); 
});

Further Notes:

Note that the 2nd alert(guess) in your posted code will occur immediately upon document.ready. I mean, immediately -- as soon as the DOM is ready. Before anything has been put into guess. That is why it returns undefined.

That is probably not what you want. Code example above adds a button to allow you to view that variable's contents when desired.

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

2 Comments

Wow! First time in my life I see that evnt.preventDefault(); isn't first line in the function's body!! Wow! Amazing
To be honest, I often put it as the first line in the function... so I don't forget to code it ... if others have DRAM for brains (like I do) then that may account for why it is usually first.
1

The function : $("#value").text(guess) is not corret in this case, replace it with :

$("#value").empty().append(guess);

you should wait to be .ready() in order to submit();

give me feedback please. enjoy :)

Improve this answer

2 Comments

B'jour - great contribution, Jean, but not completely accurate. It is not necessary to first empty the span before re-populating it. $("#value").text(guess); will overwrite any existing contents. Try it out with this jsFiddle
Doesn't it do the same thing?
0

The 'guess' variable is out of the click event handler but it's in the ready event handler; So the second alert box will be shown exactly once when the page is loaded. It will then be undefined. The click events will occur later.

Improve this answer

1 Comment

Yes the second alert box is shown when the page is loaded and it is undefined. Then the alert box from the click event shows the value I entered into the box when I press submit. After closing that, the second alert box is shown again with the value undefined, meaning the value I entered into the box wasn't stored.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.