title: document.getElementsById("").innerHTML does not change the p tag
body: <p>HTML</p>
  
  <pre><code>{% load static %}
  
   &lt;link rel="stylesheet" type="text/css" href="{% static 'lessons/style.css' %}" /&gt;
  &lt;script&gt;
  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%";
  }
  &lt;/script&gt;
  
  
  &lt;div id="mySidenav" class="sidenav"&gt;
    &lt;a href="javascript:void(0)" class="closebtn" onclick="closeNav()"&gt;&amp;times;&lt;/a&gt;
  &lt;a href="{% url 'home' %}" class="active"&gt;Home&lt;/a&gt;
  
  &lt;a href = "{% url 'lessons:index' %}"class="active"&gt;Lessons&lt;/a&gt;
  
  &lt;a href="{% url 'resources' %}"class="active"&gt;Resources&lt;/a&gt;
  
  &lt;/div&gt;
  
  &lt;div id="main"&gt;
    &lt;span style="font-size:30px;cursor:crosshair;display:inline-block" onclick="openNav()"&gt;&amp;#9776;&lt;/span&gt;
  
  &lt;h1&gt;Exercise&lt;/h1&gt;
  &lt;form id = "exercise" action= " "&gt;
  {% for question in lesson.question_set.all %}
  {% autoescape off %}{{ question.question_text }} {% endautoescape %}&lt;BR&gt;
  {% if error_message %}&lt;p&gt;&lt;strong&gt;{{ error_message }}&lt;/strong&gt;&lt;/p&gt;{% endif %}
  {% for choice in question.choice_set.all %}
    {% if choice.answer %}
  &lt;input type="radio" name="question{{question.pk}}" value=1 /&gt;{% autoescape off %}{{ choice.choice_text }}{% endautoescape %}&lt;BR&gt;
    {% else %}
  &lt;input type="radio" name="question{{question.pk}}" value=0 /&gt;{% autoescape off %}{{ choice.choice_text }}{% endautoescape %}&lt;BR&gt;
    {% endif %}
  &lt;!--&lt;label for="{{question.pk}}choice{{ forloop.counter }}"&gt;&lt;/label&gt;&lt;br /&gt;--&gt;
  
  {% endfor %}
  &lt;BR&gt;
  {% endfor %}&lt;BR&gt;&lt;BR&gt;
  &lt;input type="submit" value="Submit"&gt;&lt;BR&gt;&lt;BR&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;center&gt;&lt;p id="grade"&gt;Your grade is: &lt;/p&gt;&lt;/center&gt;
  
  &lt;button class="accordion"&gt;&lt;/button&gt;
  &lt;div class="panel"&gt;
    {% for question in lesson.question_set.all %}
    {% autoescape off %}{{question.answer}} {% endautoescape %}
    {% endfor %}
  &lt;BR&gt;&lt;BR&gt;
    &lt;p align=center&gt;&lt;a href="/../lessons/{{lesson.lesson_id}}" class="backbutton"&gt;&lt;span&gt;&lt;font-size=14px&gt;Return to Lesson&lt;/font&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;a href="/../lessons/quiz/{{lesson.lesson_id}}" class="button"&gt;&lt;span&gt;&lt;font-size=14px&gt;Quiz {{lesson.lesson_id}}&lt;/font&gt;&lt;/span&gt;&lt;/a&gt;&lt;BR&gt;&lt;BR&gt;
  &lt;/div&gt;
  
  &lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;
  </code></pre>
  
  <p>Javascript functions</p>
  
  <pre><code>  &lt;script type='text/javascript'&gt;
  
  //start function
      &lt;script&gt;
    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
  &lt;/script&gt;
  //end function
  
  
  
  
  
  
    var acc = document.getElementsByClassName("accordion");
    var i;
  
    for (i = 0; i &lt; 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";
        }
      }
    }
    &lt;/script&gt;
  </code></pre>
  
  <p>So I am using Django to create a website and I am having trouble figuring out why " document.getElementById("grade").innerHTML = result; " does not change " Your grade is: </p> " I have moved the p tag all over the page and still cannot get innerHTML to change whats in the tag. I have also changed result to different values and it still doesn't change the p tag. I also placed all the javascript functions in the same script as well. I want the page to submit the quiz and show the results. What am I doing wrong? Later, I want to show which questions are incorrect and what are the correct answers. 
  I'd appreciate the help. Thank you!</p>
  
  <p>Here is the corrected script:</p>
  
  <pre><code>&lt;script&gt;
  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
  &lt;/script&gt;
  </code></pre>