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没有从输入中获取值。我认为它可能与函数内的函数嵌套有关，但我不完全确定！

感谢您提出任何意见!!

Answer 1

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

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

});

演示：Fiddle

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

1 个答案: