Question

使用JavaScript制作了一个简单的文字游戏。我问一个数学问题，用户必须输入一个值。页面上有4个框，我想弄清楚的是当用户为页面上弹出的文本输入所有正确的答案时，我该如何理解它。

下面。代码重复了4次。

function changecolour1(textbox) {
    var val = textbox.value;
    if (val == 26) {
        textbox.style.backgroundColor = 'green';
    } else {
        textbox.style.backgroundColor = 'red';
    }
}

因此，当用户在4个框中输入正确的数字时，再次尝试2弄清楚如何获得它，以便它弹出说得好。

Answer 1

$(document).ready(function() {
$('#questions input').keyup(function() {
    var val = $(this).val();
    if (val == '26') {
        $(this).css('backgroundColor', 'green');
        $(this).attr('correct', 'true');
    } else {
        $(this).css('backgroundColor', 'red');
        $(this).attr('correct', 'false');
    }
    if ($('#questions input[correct="true"]').length == $('#questions input').length) alert("All answers are OK!");

});

}）;

<div id="questions" >
1: <input type="text" id="a1"/><br/>
2: <input type="text" id="a2"/><br/>
3: <input type="text" id="a3"/><br/>
4: <input type="text" id="a4"/><br/>
</div>

工作示例： http://jsfiddle.net/vash6p/HLF3K/

Answer 2

var counter=0;
function changecolour1(textbox) {
var val = textbox.value;
if (val == 26) {
    textbox.style.backgroundColor = 'green';
    counter++;
    if(counter==4)
    {
        alert('well done');
    }
}
else {
    textbox.style.backgroundColor = 'red';
    counter--;
    if(counter < 0)
    {
       counter=0;
    }
}
}

function reset(){
    counter=0;
}

Answer 3

跟踪所有问题的状态，并在每个函数中询问该状态：

// question 1 is questionState[0], 2 is questionState[1], etc
var questionState = [false, false, false, false];

var allCorrect = function () {
    for (var i = 0; i < questionState.length; i++) {
        if (!questionState[i]) {
            return false;
        }
    }

    return true;
};

var changecolour1 = function (textbox) {
    var val = textbox.value;
    if (val == 26) {
        questionState[0] = true;
        textbox.style.backgroundColor = 'green';

        if (allCorrect()) {
            alert('Congratulations!');
        }
    } else {
        questionState[0] = false;
        textbox.style.backgroundColor = 'red';
    }
};

请注意，您可以使用一个通用函数替换所有4个changecolour函数。这假定您的文本框具有相应的ID：

var questions = {
    textbox1: {
        answer: 26,
        state: false
    },
    textbox2: {
        answer: 0,
        state: false
    },
    textbox3: {
        answer: 1,
        state: false
    },
    textbox4: {
        answer: 2,
        state: false
    },
};

var allCorrect = function () {
    for (var i = 0; i < questions.length; i++) {
        if (!questions[i].state) {
            return false;
        }
    }

    return true;
};

var changecolour = function (textbox) {
    var val = textbox.value;
    if (val == questions[textbox.id].answer) {
        questions[textbox.id].state = true;
        textbox.style.backgroundColor = 'green';

        if (allCorrect()) {
            alert('Congratulations!');
        }
    } else {
        questions[textbox.id].state = false;
        textbox.style.backgroundColor = 'red';
    }
};

Answer 4

嘿，如果你在每个输入字段中添加一个名为boxes的类，你可以做类似的事情。我使用jquery来处理事件。

$(document).ready(function() {
  var Game = {
    correctAnswers: 0,  
    questionCount: undefined,
    addListener: function(boxes){
        this.questionCount = boxes.length;
        var that = this;
        for(var i = 0; i < boxes.length; i++){
            var item = boxes[i];
            $(item).keyup(function(){
                if($(this).val() == "correct value"){
                    $(this).unbind();
                    that.correctAnswers++;
                    $(this).css({background:'green'});
                    if(that.correctAnswers === that.questionCount){
                        that.gameOver();
                    }
                }else{
                    $(this).css({background:'red'});
                }
            });
        }    
    },
    gameOver: function(){
        alert("You won!");
    }
};
Game.addListener($('.boxes'));
});


<input type="text" class="boxes" />
<input type="text" class="boxes" />

javascript如何接受答案

4 个答案: