如何通过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); 
    } 
});