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

Question

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

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

按最后一次按钮时，页面 questionendQuiz.php 会加载到我的 quizWrapper 中。

我想将分数输出到名为 scoreout 的范围内

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

我尝试使用getElementById

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

问题是，当页面通过 AJAX 加载时，它不会运行。于是我尝试将其绑定(bind)到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是其当前值。这不会永久绑定(bind) quizScore 的值到 DOM 元素，这只是一次值传输。当您想要显示新更改的分数时，您必须重新运行此语句。

如果您通过 ajax 调用更新此分数，则可以使用 .ajaxComplete()就像您在任何 ajax 调用完成后更新分数一样，或者您可以在计算新更新的分数(无论代码中的何处)后立即更新代码中显示的分数。