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

Output Javascript variable when page loads through AJAX

本文关键字：输出 Javascript 变量 AJAX 加载 通过      更新时间：2023-09-26

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

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

按下最后一个按钮，页面questionendQuiz.php被加载到我的quizWrapper中。

我想将分数输出到一个名为scoreout的span 

<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

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

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

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

如果你通过ajax调用更新这个分数，你可以使用.ajaxComplete()，因为你正在做任何ajax调用完成后更新分数，或者你可以在你计算新更新的分数后在你的代码中更新分数显示(无论这是在你的代码)。

我看了你的网站。为了使其工作，您应该更改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是区分大小写的。

相关文章：