Getting data from input text to variable

Question

Question: Why I can't get the value of the input text #userGuess into the variable userInput?

Here is the HTML

    <div class="row-fluid">
    <div class="span12" style="text-align:center">
        <form>
            <fieldset>
                <legend>Guessing Game</legend>
                <label>Input a number in your mind</label>
                <input type="text" id="userGuess" auto-complete="off">
                <span class="help-block" style="display:block">
                    <p class="help-block" id="resultWaiting" style="display:block">Results!</p>
                    <p class="help-block" id="resultWarmer" style="display:none; color:#E61010">Warmer!</p>
                    <p class="help-block" id="resultColder" style="display:none; color:#104CE6">Brr! Colder</p>
                    <p class="help-block" id="resultCorrect" style="display:none; color:#E61010">YES! YOU GOT IT</p>    
                </span>
                <button type="submit" id="submitButton" class="btn">Submit</button>
                <button class="btn btn-danger" type="button">Show Result</button>
            </fieldset>
        </form> 
    </div>
</div>

And here is the javascript code

    $("#submitButton").click(submit);
function submit() {
    var userInput = $('#userGuess').val();
    if (userInput == pcRandom) {
        $("#resultWaiting").css("display","none");
        $("#resultCorrect").css("display","block");
    } else{
        compare(userInput, pcRandom);
    }
}

While debugging on Chrome Dev Tools, it just said the userInput variables is undefined.

I use Bootstrap for css framework and jQuery

should, best practice, not must. JavaScript organizes this internally: jsfiddle.net/uJDnd — Robert Hoffmann
– Robert Hoffmann, Commented Oct 30, 2013 at 23:19
Don't see any problem with code. Its working fine jsfiddle.net/amantur/CUDJR — amantur
– amantur, Commented Oct 30, 2013 at 23:23
@ManavKataria even with that it will not make any difference. see here: jsfiddle.net/amantur/CUDJR/1 — amantur
– amantur, Commented Oct 30, 2013 at 23:33

EmptyArsenal · Accepted Answer · 2013-10-30 23:55:34Z

1

This worked for me after I added a event.preventDefault() to the jQuery. However, this is assuming that compare compares the two guesses and changes the CSS accordingly, and that pcRandom picks a random number:

$("#submitButton").click(function(event) {
    event.preventDefault();
    submit();
});

function submit() {
    var userInput = $('#userGuess').val();
    var pcRandom = 5;
    console.log(userInput);
    if (userInput == pcRandom) {
        $("#resultWaiting").css("display","none");
        $("#resultCorrect").css("display","block");
    } else{
        compare(userInput, pcRandom);
    }
 }

EDIT:

Here's a fully functioning JSFiddle: http://jsfiddle.net/9VYvg/

edited Oct 30, 2013 at 23:55

answered Oct 30, 2013 at 23:30

EmptyArsenal

7,4964 gold badges40 silver badges66 bronze badges

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

Collectives™ on Stack Overflow

Getting data from input text to variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related