Javascript 在jQuery中调用表单输入并运行函数

这是我关于堆栈溢出的第一个问题，我只编写了几个月的代码，我知道我可能只是缺少一些简单的东西。我试图创建一个简单的程序，用于学习，计算机自动选择1-100之间的数字，然后用户选择数字，如果他们的选择与计算机数字有关，则会发出警报

我试图将用户的答案从表单字段传递到JavaScript变量中，然后在单击按钮时运行函数来测试他们的答案。我对这两个都使用jQuery

以下是实时应用程序：

这是我的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=$（'#guess'）.val（）；
var comNum=Math.floor（Math.random（）*101）；
var差=函数（a，b）{return Math.abs（a-b）}；
var askNumber=函数（）{
if（userNum==comNum）{
警惕（“你成功了！你赢了！”）
}
else if（差异（userNum，comNum）<5）{
警惕（“非常热！”）；
}
else if（差异（userNum、comNum）<10）{
警报（“热！”）；
}
else if（差异（userNum、comNum）<20）{
警惕（“温暖！”）；
}
否则如果（差异（userNum、comNum）>20）{
警惕（“非常冷！”）
}
否则{
警报（“对不起，您需要选择一个号码。”）
}
};
$（文档）.ready（函数（）{
$（“#拾取”）。单击（函数（）{
askNumber（）；
});
});

似乎

var userNum

没有从输入中获取值。我认为这可能与函数中的函数嵌套有关，但我不能完全确定

---

谢谢你的任何意见

您需要读取函数中的值-在代码中，您正在页面加载期间（在单击之前）读取输入字段

功能差异（a、b）{
return Math.abs（a-b）
};
函数askNumber（）{
//读取单击处理程序中的用户输入
var userNum=parseInt（$（'#guess'）.val（），10）；
var comNum=Math.floor（Math.random（）*101）；
//只计算一次差值，然后重新使用
var diff=差异（userNum、comNum）；
如果（差异==0）{
警惕（“你成功了！你赢了！”）
}否则如果（差值<5）{
警惕（“非常热！”）；
}否则如果（差值<10）{
警报（“热！”）；
}否则如果（差值<20）{
警惕（“温暖！”）；
}否则，如果（差异>20）{
警惕（“非常冷！”）
}否则{
警报（“对不起，您需要选择一个号码。”）
}
};
$（文档）.ready（函数（）{
$（“#拾取”）。单击（函数（）{
askNumber（）；
});
});

---

演示：

您需要读取函数中的值-在代码中，您正在页面加载期间（在单击之前）读取输入字段

功能差异（a、b）{
return Math.abs（a-b）
};
函数askNumber（）{
//读取单击处理程序中的用户输入
var userNum=parseInt（$（'#guess'）.val（），10）；
var comNum=Math.floor（Math.random（）*101）；
//只计算一次差值，然后重新使用
var diff=差异（userNum、comNum）；
如果（差异==0）{
警惕（“你成功了！你赢了！”）
}否则如果（差值<5）{
警惕（“非常热！”）；
}否则如果（差值<10）{
警报（“热！”）；
}否则如果（差值<20）{
警惕（“温暖！”）；
}否则，如果（差异>20）{
警惕（“非常冷！”）
}否则{
警报（“对不起，您需要选择一个号码。”）
}
};
$（文档）.ready（函数（）{
$（“#拾取”）。单击（函数（）{
askNumber（）；
});
});

---

演示：

非常感谢，效果非常好！我发现的唯一问题是，我需要将

var comNum

从

函数askNumber

中移出，否则计算机会在每次单击时选择一个新的数字。（当然，我没有提到最终目标是让用户有多个机会猜出数字，所以你的答案没有任何错误，只是我的问题：））此外，谢谢你的代码清理，我从中获得了一些好的提示！非常感谢，这非常有效！我发现的唯一问题是，我需要将

var comNum

从

函数askNumber

中移出，否则计算机会在每次单击时选择一个新的数字。（当然，我没有提到最终目标是让用户有多个机会猜出数字，所以你的答案没有任何错误，只是我的问题：））此外，谢谢你的代码清理，我从中获得了一些好的提示！

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();
    });

});