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

我正在尝试制作一个小抽认卡问答游戏，我正在尝试实现一个功能，在该功能中，有人可以在输入区域中输入文本，然后在按下输入后，“正确”或“不正确”一词会在屏幕上闪烁 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();
    });
}

这些功能没有像我预期的那样工作，我想知道是否有人能告诉我哪里出错了。

如果您需要更多信息来了解我在这里做什么，请不要犹豫，问!

任何帮助或建议将不胜感激!

谢谢你。

最佳答案

在这部分:

    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++;
    }

您正在循环一个字符串 (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; 声明为 global 并在 displayCard() 中设置其值，我想您会在其中执行随机操作或类似操作。

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

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

关于javascript - 如何通过 HTML 表单输入文本并使用 Javascript 从 JSON 文件中检索数据作为响应？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20621335/