如何通过HTML表单输入文本并使用Javascript从JSON文件中检索数据作为响应？

Question

我正在尝试制作一个小卡片问答游戏，我正在尝试实现一个功能，有人可以将文本输入到输入区域，然后按下输入后，“正确”或“不正确”一词会闪现在在输入区域为空白并且下一个问题被加载之前，屏幕持续1秒。

以下是我正在做的事情的视觉效果：

特别是，这是生成下面输入文本区域的HTML代码：

<form id="answers">
    <input type="text" name="inputtext" id="answer" style="width: 100%; height: 30px;" placeholder="Enter your answer..." onkeyup="checkAnswer(this,event);" autofocus><br>
</form>

这是JSON文件，保存为：questionsAndAnswersItalian.json

[{"q":"What is the word for 'where' in Italian?","a":"Dove"},
{"q":"What is the word for 'when' in Italian?","a":"Quando"},
{"q":"What is the word for 'why' in Italian?","a":"Perché"}]

这是我写的javascript代码无效：

var jsonUrl = "questionsAndAnswersItalian.json";
var qs;
var numCards;
var maxIndex;

function checkAnswer(input, event){
    if(event.keyCode == 13){
        var answer = document.getElementById("answer").value.toLowerCase();
        var questionNumber = 0;
        for(var i = 0; i<jsonUrl.length; i++){
            if(answer == jsonUrl[questionNumber]["a"].toLowerCase()){
                setTimeout(correct_input, 1000);
                input.value = "";
            }else{
                setTimeout(incorrect_input, 1000);
                input.value = "";
            }
            questionNumber++;
        }
    }
}
function correct_input(){
    input.value = "Correct!";
}
function incorrect_input(){
    input.value = "Incorrect!";
}

function init() {
    $.getJSON(jsonUrl, function(jsonObject) {
        qs = jsonObject;
        numCards = qs.length;
        maxIndex = numCards-1;
        displayCard();
    });
}

这些功能没有按照我的预期运作，我想知道是否有人可以告诉我哪里出错了。

如果您需要更多信息来了解我在这里所做的事情，请不要犹豫！

非常感谢任何帮助或建议！

谢谢。

Answer 1

在这部分：

    for(var i = 0; i<jsonUrl.length; i++){
        if(answer == jsonUrl[questionNumber]["a"].toLowerCase()){
            setTimeout(correct_input, 1000);
            input.value = "";
        }else{
            setTimeout(incorrect_input, 1000);
            input.value = "";
        }
        questionNumber++;
    }

您正在遍历String（jsonUrl），而不是您的jsonObject。请改用qs。

修改

这是一个有效的jquery代码：

$('#answer').keyup(function(event) {
    var code = event.keyCode || event.which;

    if (code == 13) {
        var answer = $(this).val().toLowerCase();
        var goodAnswer = qs[currentCard].a.toLowerCase();

        if (answer == goodAnswer) {
            setTimeout(correct_input, 1000);
        }
        else {
            setTimeout(incorrect_input, 1000);
        }

        $(this).val('');
    }
});

将var currentCard = null;声明为全局，并将其值设置为displayCard()，我认为您可以随机执行此类操作。

使用此代码，您必须删除onkeyup="checkAnswer(this,event);"。

jsfiddle： http://jsfiddle.net/u7bkH/

Answer 2

setTimeout函数需要异步回调。

编辑一个更完整的示例，但 注意 ，它只显示了根据您的要求正确使用setTimeout的方法。您需要完成对答案正确性的适当检查。

所以，将代码更改为

$('#answer').keyup(function(event) {
  var code = event.keyCode || event.which;
  if (code == 13) {
    var input = $(this);
    var answer = input.val().toLowerCase();
    if (answer == "correct") {
      input.val("Correct!");
    }
    else {
      input.val("Incorrect!");
    }
    setTimeout(
      function(){
        input.val("");
      },1000);
  }
});