Question

我有一个测验，其中每个问题都使用AJAX在div中重新加载，而不是刷新整个页面。

我有一个变量quizScore，用于保存用户的分数。

在最后一个按钮上，页面questionendQuiz.php已加载到我的quizWrapper。

我想将分数输出到名为scoreout

的范围内

<span id="scoreOut"></span>

我尝试使用getElementById

document.getElementById("scoreout").value = quizScore;

问题是，当通过AJAX加载页面时，这不会运行。所以我尝试将它绑定到AJAX页面加载的成功：

$( document ).ajaxComplete(function( event,request, settings ) {
  document.getElementById("scoreout").value = quizScore;  
});

因此，当运行该脚本的页面运行时，它应该运行并输出分数，但它似乎不起作用。

您可以在此处查看该网站：http://fh80.student.eda.kent.ac.uk/fyp-assets/quiz/quiz.php

Answer 1

.value适用于<input>标记等表单元素。您应该使用.innerHTML作为div或span或其他类型的HTML元素。

document.getElementById("scoreout").innerHTML = quizScore;

至于计时问题，您只需要在scoreout DOM对象在页面中并且quizScore处于其当前值之后执行此语句。这并不会将quizScore的值永久绑定到DOM元素，它只是一次性传输值。只要您想显示新更改的分数，就必须重新运行此声明。

如果您通过ajax调用更新此分数，您可以使用.ajaxComplete()在任何ajax调用完成后更新分数，或者您可以在计算后立即更新代码中的分数显示新更新的分数（代码中的任何位置）。

Answer 2

我看了你的网站。为了使其有效，您应该更改nextQuestion功能并添加if(buttonID ...，如下所示：

if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
    document.getElementById("quizWrapper").innerHTML=xmlhttp.responseText;
    if (buttonID == "question_endQuiz") {
        document.getElementById("scoreOut").innerHTML = quizScore;
    }
}

此外，它应该是“scoreOut”而不是“scoreout”，因为javascript区分大小写。

通过AJAX加载页面时输出Javascript变量

2 个答案: