title: How do I display the results of a JavaScript function in HTML?
body: <p>I am writing a program to display the grade based on the user input. However, when I press "Submit" after entering all the input correctly, nothing happens. I think my onclick function is incorrect. Additionally, how do I display what the user inputted on the HTML page as well? Thank you. EDIT: Thank you for all the replies. Definitely helped me out.</p>
  
  <pre><code> &lt;form name="form1"&gt;
  &lt;p&gt;&lt;b&gt;Name: &lt;/b&gt; &lt;input TYPE="TEXT" SIZE="20" NAME="yourname"&gt;&lt;/p&gt;
  
  &lt;p&gt;&lt;b&gt;Assignment 1: &lt;/b&gt;&lt;input type="number" id="assign1" size=10 value="" name="onlynumbers" min="0" max="25" required&gt;&lt;span class="required"&gt;*&lt;/span&gt;&lt;/p&gt;
  
  &lt;p&gt;&lt;b&gt;Assignment 2: &lt;/b&gt;&lt;input type="number" id="assign2" size=10 value="" name="onlynumbers" min="0" max="25" required&gt;&lt;span class="required"&gt;*&lt;/span&gt;&lt;/p&gt;
  
  &lt;p&gt;&lt;b&gt;Assignment 3: &lt;/b&gt;&lt;input type="number" id="assign3" size=10 value="" name="onlynumbers" min="0" max="25" required&gt;&lt;span class="required"&gt;*&lt;/span&gt;&lt;/p&gt;
  
  &lt;p&gt;&lt;b&gt;Assignment 4: &lt;/b&gt;&lt;input type="number" id="assign4" size=10 value="" name="onlynumbers" min="0" max="25" required&gt;&lt;span class="required"&gt;*&lt;/span&gt;&lt;/p&gt;
  
  &lt;p&gt;&lt;b&gt;Midterm Exam: &lt;/b&gt;&lt;input type="number" id="assign5" size=10 value="" name="onlynumbers" min="0" max="100" required&gt;&lt;span class="required"&gt;*&lt;/span&gt;&lt;/p&gt;
  
  &lt;p&gt;&lt;b&gt;Final Exam: &lt;/b&gt;&lt;input type="number" id="assign6" size=10 value="" name="onlynumbers" min="0" max="100" required&gt;&lt;span class="required"&gt;*&lt;/span&gt;&lt;/p&gt;
  
  &lt;p&gt;&lt;b&gt;Final Project:&lt;/b&gt;&lt;input type="number" id="assign7" size=10 value="" name="onlynumbers" min="0" max="100" required=""&gt;&lt;span class="required"&gt;*&lt;/span&gt;&lt;/p&gt;
  
  &lt;p&gt;
  &lt;button onclick = "getElementById('average').value=calculator(getElementById('average').value)"&gt;Submit&lt;/button&gt;
  &lt;input type="reset" value="Reset"&gt;
  
  &lt;/p&gt;
  &lt;/form&gt;
  &lt;/p&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
      function calculator()
      {
          var grade1=parseFloat(document.getElementById('assign1').value*1);
          var grade2=parseFloat(document.getElementById('assign2').value*1);
          var grade3=parseFloat(document.getElementById('assign3').value*1);
          var grade4=parseFloat(document.getElementById('assign4').value*1);
          var grade5=parseFloat(document.getElementById('midterm').value*1);
          var grade6=parseFloat(document.getElementById('final').value*1);
          var grade7=parseFloat(document.getElementById('project').value*1);
          var total=grade1 + grade2 + grade3 + grade4 + grade5 + grade6 + grade7;
          var average = total / 4
  
  
      }
  
  
  
  &lt;/script&gt;
  </code></pre>