javascript - document.getElementById ("").innerHTML 不改变p标签

Question

HTML

{% load static %}

 <link rel="stylesheet" type="text/css" href="{% static 'lessons/style.css' %}" />
<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "20%";
    document.getElementById("main").style.marginLeft = "20%";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "20%";
}
</script>


<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="{% url 'home' %}" class="active">Home</a>

<a href = "{% url 'lessons:index' %}"class="active">Lessons</a>

<a href="{% url 'resources' %}"class="active">Resources</a>

</div>

<div id="main">
  <span style="font-size:30px;cursor:crosshair;display:inline-block" onclick="openNav()">&#9776;</span>

<h1>Exercise</h1>
<form id = "exercise" action= " ">
{% for question in lesson.question_set.all %}
{% autoescape off %}{{ question.question_text }} {% endautoescape %}<BR>
{% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}
{% for choice in question.choice_set.all %}
  {% if choice.answer %}
<input type="radio" name="question{{question.pk}}" value=1 />{% autoescape off %}{{ choice.choice_text }}{% endautoescape %}<BR>
  {% else %}
<input type="radio" name="question{{question.pk}}" value=0 />{% autoescape off %}{{ choice.choice_text }}{% endautoescape %}<BR>
  {% endif %}
<!--<label for="{{question.pk}}choice{{ forloop.counter }}"></label><br />-->

{% endfor %}
<BR>
{% endfor %}<BR><BR>
<input type="submit" value="Submit"><BR><BR>
</form>
</div>

<center><p id="grade">Your grade is: </p></center>

<button class="accordion"></button>
<div class="panel">
  {% for question in lesson.question_set.all %}
  {% autoescape off %}{{question.answer}} {% endautoescape %}
  {% endfor %}
<BR><BR>
  <p align=center><a href="/../lessons/{{lesson.lesson_id}}" class="backbutton"><span><font-size=14px>Return to Lesson</font></span></a>
    <a href="/../lessons/quiz/{{lesson.lesson_id}}" class="button"><span><font-size=14px>Quiz {{lesson.lesson_id}}</font></span></a><BR><BR>
</div>

<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

Javascript 函数

  <script type='text/javascript'>

//start function
    <script>
  document.getElementById("exercise").onsubmit = function() {
  var result=0;
  { % for question in lesson.question_set.all % }
  result += parseInt(document.querySelector('input[name = "question{{question.pk}}"]:checked').value);
  { % endfor % }
  document.getElementById("grade").innerHTML = result;
  return false; // required to not refresh the page; just leave this here
  } //this ends the submit function
</script>
//end function






  var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function() {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight){
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
      }
    }
  }
  </script>

所以我正在使用 Django 创建一个网站，但我无法弄清楚为什么“document.getElementById("grade").innerHTML = result;”没有改变“你的成绩是:

”我有将 p 标签移到整个页面，但仍然无法让 innerHTML 更改标签中的内容。我还将结果更改为不同的值，但它仍然没有更改 p 标签。我还将所有 javascript 函数也放在同一个脚本中。我希望页面提交测验并显示结果。我究竟做错了什么？稍后，我想展示哪些问题是错误的，哪些是正确的答案。我很感激你的帮助。谢谢!

这是更正后的脚本:

<script>
document.getElementById("submit").onclick = function() {
var result=0;
var count=0;
{% for question in lesson.question_set.all %}
result += parseInt(document.querySelector('input[name = "question{{question.pk}}"]:checked').value);
count++;
{% endfor %}
document.getElementById("grade").innerHTML = "You got a "+result+"/"+count+". If you would like to retake the quiz please resubmit!";
return false; // required to not refresh the page; just leave this here
} //this ends the submit function
</script>

Answer 1

它是 getElementById 而不是 getElementsById。

document.getElementById("grade").innerHTML = result;