Question

我目前正在编写一个Web应用程序，它将在屏幕上显示一个笑话，但缺少一个单词。用户的工作是在屏幕上的文本框中输入缺失的单词。

目前，我有一个HTML文件，它有两个连接到PHP文件的JavaScript方法。第一种方法在屏幕上显示笑话，第二种方法验证用户的答案。第二种方法还使用PHP在屏幕上输出用户的答案是否正确。

我遇到的问题是，第一次输入答案时，xml请求返回空白，这意味着无论用户的答案是否正确，它都无法正确处理。但是，后续尝试会显示一个值，但他们只会落后一个。例如，如果用户在一个问题上输入了错误答案，而在下一个问题上输入了正确答案，那么他们仍会声称他们给出的答案不正确。

这里是我正在处理的代码片段，非常感谢任何建议。

function processAnswer(answer) 
{
 result = new XMLHttpRequest();

    result.onreadystatechange = function()
    {
        if (result.readyState == 4 && result.status == 200)
        {
            document.getElementById("result").innerHTML = result.responseText;
        }
    }

    //Sends user's answer to PHP file
    result.open("GET","processJoke.php?a="+answer,true);
    result.send();

//This is what I was using to test
    alert(document.getElementById("result").innerHTML);

//Increment score
    score++;
    document.getElementById('correctNum').innerHTML = score;
}

编辑：想出来，我只需要移动调用以将分数增加到AJAX请求中。这是更新后的方法：

function processAnswer(answer)
{
result = new XMLHttpRequest();

result.onreadystatechange = function()
{
    if (result.readyState == 4 && result.status == 200)
    {
        //Output whether the user is correct or not
        document.getElementById("result").innerHTML = result.responseText;
        var outcome = document.getElementById("result").innerHTML;

        //Increment score if the user answered correctly
        if(outcome == "Correct!")
        {
            score++;
        }

        //Set score
        document.getElementById('correctNum').innerHTML = score;

        //If all the jokes are answered, the game ends
        if(score == 10)
        {
            alert("Congratulations, you've won!");
            document.location.href = "main.html";
        }
    }
}

//Sends user's answer to PHP file
result.open("GET","processJoke.php?a="+answer,true);
result.send();

我第一次使用XMLHttpRequest返回数据时，它总是显示返回空白，但后来它很好

0 个答案: