Calling form input in jQuery and running function

Question

this is my first question on stack overflow, I have only been coding for a few months and I know I am probably just missing something simple here. I am trying to create a simple program for learning purposes, computer auto picks number between 1-100, user then picks number and is alerted if their choice is hot or cold in relation to the computer number.

I am trying to pass the users answer from a form field into a JavaScript variable, then run the function to test their answer when a button is clicked. I am using jQuery for both of these.

Here is the application live: http://keithlamar.github.io/HotOrCold/

Here is my HTML:

<form>
   Your Number <input id="guess" type="number" name="yournumber"><br>
</form>
   <p id="pick">Click Here</p>

Here is my JavaScript:

var userNum = $('#guess').val();
var comNum = Math.floor(Math.random()*101);
var difference = function (a,b) {return Math.abs(a - b)};
var askNumber = function(){
    if(userNum == comNum){
        alert("You got it! You Win!")
    }
    else if(difference(userNum,comNum) < 5){
        alert("Very Hot!"); 
    }
    else if(difference(userNum,comNum) < 10){
        alert("Hot!");  
    }
    else if(difference(userNum,comNum) < 20){
        alert("Warm!"); 
    }
    else if(difference(userNum,comNum) > 20){
        alert("Very Cold!")         
    }
    else {
        alert("Sorry, you need to choose a number.")    
    }

};
$(document).ready(function(){

    $('#pick').click(function(){
    askNumber();
    });

});

It seems like the var userNum is not getting a value from the input. I think it may have something to do with nesting of functions within functions, but I am not entirely sure!

Thanks for any input!!

Arun P Johny · Accepted Answer · 2013-10-16 03:50:33Z

1

You need to read the values inside the function - in your code you are reading the input field during the page load(before the click happens)

function difference(a, b) {
    return Math.abs(a - b)
};

function askNumber() {
    //read the user input in the click handler
    var userNum = parseInt($('#guess').val(), 10);

    var comNum = Math.floor(Math.random() * 101);

    //calculate the difference only once then reuse it
    var diff = difference(userNum, comNum);
    if (diff == 0) {
        alert("You got it! You Win!")
    } else if (diff < 5) {
        alert("Very Hot!");
    } else if (diff < 10) {
        alert("Hot!");
    } else if (diff < 20) {
        alert("Warm!");
    } else if (diff > 20) {
        alert("Very Cold!")
    } else {
        alert("Sorry, you need to choose a number.")
    }

};
$(document).ready(function () {

    $('#pick').click(function () {
        askNumber();
    });

});

Demo: Fiddle

edited Oct 16, 2013 at 3:50

answered Oct 16, 2013 at 3:44

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

2 Comments

Keith Lamar Over a year ago

Thanks so much, that worked perfectly! The only issue I found is that I needed to move the var comNum out of the function askNumber, otherwise the computer would pick a new number on every click. (But of course I didn't mention that the end goal was to give the user multiple chances to guess the number, so there wasn't anything wrong with your answer, just my question :) )

Keith Lamar Over a year ago

Also, thanks for the code clean, I picked up some good tips from it!

Collectives™ on Stack Overflow

Calling form input in jQuery and running function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related