Question

我有一个数学游戏的代码：

HTML：

<div id="problem"></div>
<input id="answer" type="text">
<button id="submit">Submit</button>
<div id="answerMessage"></div>

JS：

$(document).ready(function() {

    $('#answer').focus();
    $('#problem').append( newProblem() );


    $('#submit').on('click', function() {
        var userAnswer = $('#answer').val();

        if ( checkAnswer(number1, number2, userAnswer) ) {
            $('#answerMessage').html('');
            $('#answerMessage').append("Great!");

            $('#problem').html('');
            $('#problem').append( newProblem() );

            $('#answer').val('');
            $('#answer').focus();
        } else {
            $('#answerMessage').html('');
            $('#answerMessage').append("Oops");

            $('#answer').val('');
            $('#answer').focus();
        }
    });

});

function checkAnswer(number1, number2, answer) {
    if ( number1 + number2 == answer ) {
        return true;
    }
    return false;
}

function newProblem() { // could just return 1 number, then we call it twice.
    var number1 = Math.floor(99 * Math.random()) + 1; // adding var here fails
    var number2 = Math.floor(99 * Math.random()) + 1;
    return number1 + " + " + number2; 
}

当我在number1和number2前面添加var时，在newProblem()函数中，脚本无法正常工作。我得到Uncaught ReferenceError: number1 is not defined。

为什么会这样？

Answer 1

因为number1和number2是newProblem()函数范围的本地，因此它在单击处理程序中不可用。解决方案是在两个方法之间共享的范围中声明它

$(document).ready(function () {

    $('#answer').focus();
    $('#problem').append(newProblem());


    $('#submit').on('click', function () {
        var userAnswer = $('#answer').val();

        if (checkAnswer(number1, number2, userAnswer)) {
            $('#answerMessage').html('');
            $('#answerMessage').append("Great!");

            $('#problem').html('');
            $('#problem').append(newProblem());

            $('#answer').val('');
            $('#answer').focus();
        } else {
            $('#answerMessage').html('');
            $('#answerMessage').append("Oops");

            $('#answer').val('');
            $('#answer').focus();
        }
    });

    function checkAnswer(number1, number2, answer) {
        if (number1 + number2 == answer) {
            return true;
        }
        return false;
    }

    //make these two to be in a closure scope accessible to both newProblem and click handler
    var number1, number2;

    function newProblem() { // could just return 1 number, then we call it twice.
        number1 = Math.floor(99 * Math.random()) + 1; // adding var here fails
        number2 = Math.floor(99 * Math.random()) + 1;
        return number1 + " + " + number2;
    }
});

我将在dom ready处理程序中声明变量，并在其中移动方法newProblem和checkAnswer。

Answer 2

尝试在脚本

之上声明变量

var number1,number2;
$(document).ready(function() {

你在全球范围内使用它们

Answer 3

在触摸 jQuery之前，您必须正确组织您的应用程序：

function AddingGame() {
    this.number1 = null;
    this.number2 = null;

    function randomNumber(min, max) {
        return min + Math.floor((max - min + 1) * Math.random());
    }

    this.newProblem = function() {
        this.number1 = randomNumber(1, 100);
        this.number2 = randomNumber(1, 100);
    };

    this.checkAnswer = function(answer) {
        return this.number1 + this.number2 == answer;
    };

    this.problemText = function() {
        return this.number1 + ' + ' + this.number2;
    }

    this.newProblem();
}

$(document).ready(function() {
    var game = new AddingGame();

    $('#problem').text(game.problemText());
    $('#answer').focus();

    $('#submit').click(function() {
        var answer = $('#answer').val();
        $('#answer').val('').focus();

        if (game.checkAnswer(answer)) {
            $('#answerMessage').text("Great!");

            game.newProblem();
            $('#problem').text(game.problemText());
        } else {
            $('#answerMessage').append("Oops");
        }
    });
});

Answer 4

number1和number2被定义为 function newProblem（）的局部变量。全局定义它们（在脚本内，在所有函数之外）。

Answer 5

它在函数内声明，这意味着它只能在那里访问。如果要全局访问变量，可以删除var。在您的代码中，您在这里使用相同的变量：

 if ( checkAnswer(number1, number2, userAnswer) ) {
}

使用var使脚本不起作用

5 个答案: