javascript - jQueryでフォーム入力を呼び出して関数を実行する

Question

これはスタック オーバーフローに関する私の最初の質問です。私はコーディングを始めてまだ数か月しか経っていませんが、ここで何か単純なものが欠けている可能性があることはわかっています。学習目的で単純なプログラムを作成しようとしています。コンピューターは 1 ～ 100 の番号を自動的に選択し、ユーザーは番号を選択し、コンピューター番号に関連して選択がホットまたはコールドである場合に警告されます。

ユーザーの回答をフォーム フィールドから JavaScript 変数に渡してから、関数を実行して、ボタンがクリックされたときに回答をテストしようとしています。これらの両方にjQueryを使用しています。

これがアプリケーションのライブです: http://keithlamar.github.io/HotOrCold/

ここに私のHTMLがあります：

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

ここに私の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();
    });

});

var userNum入力から値を取得していないようです。関数内の関数のネストと関係があるのではないかと思いますが、完全にはわかりません!

ご意見ありがとうございます。