How do I display the results of a JavaScript function in HTML?

Question

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?

 <form name="form1">
<p><b>Name: </b> <input TYPE="TEXT" SIZE="20" NAME="yourname"></p>

<p><b>Assignment 1: </b><input type="number" id="assign1" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>

<p><b>Assignment 2: </b><input type="number" id="assign2" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>

<p><b>Assignment 3: </b><input type="number" id="assign3" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>

<p><b>Assignment 4: </b><input type="number" id="assign4" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>

<p><b>Midterm Exam: </b><input type="number" id="assign5" size=10 value="" name="onlynumbers" min="0" max="100" required><span class="required">*</span></p>

<p><b>Final Exam: </b><input type="number" id="assign6" size=10 value="" name="onlynumbers" min="0" max="100" required><span class="required">*</span></p>

<p><b>Final Project:</b><input type="number" id="assign7" size=10 value="" name="onlynumbers" min="0" max="100" required=""><span class="required">*</span></p>

<p>
<button onclick = "getElementById('average').value=calculator(getElementById('average').value)">Submit</button>
<input type="reset" value="Reset">

</p>
</form>
</p>


<script type="text/javascript">

    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


    }



</script>

Answer 1

There are a lot of mistakes in your code. Here is a following working, but first :

• You should prevent form validation (onsubmit) to prevent page reload.
• You should call your display function into your onsubmit and not during button click
• Your calculator() function should return the average value
• to fill a div with content, use innerHTML=variable
• Your result <div id="average"></div> is missing
• A lot of input div wasn't having the right id=""

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;
  return average;
}

function displayResult() {
  var result = calculator();
  document.getElementById('average').innerHTML = result;
  return false;
}

<form name="form1" onsubmit="event.preventDefault();return displayResult();">
  <p><b>Name: </b> <input TYPE="TEXT" SIZE="20" NAME="yourname"></p>

  <p><b>Assignment 1: </b><input type="number" id="assign1" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>

  <p><b>Assignment 2: </b><input type="number" id="assign2" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>

  <p><b>Assignment 3: </b><input type="number" id="assign3" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>

  <p><b>Assignment 4: </b><input type="number" id="assign4" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>

  <p><b>Midterm Exam: </b><input type="number" id="midterm" size=10 value="" name="onlynumbers" min="0" max="100" required><span class="required">*</span></p>

  <p><b>Final Exam: </b><input type="number" id="final" size=10 value="" name="onlynumbers" min="0" max="100" required><span class="required">*</span></p>

  <p><b>Final Project:</b><input type="number" id="project" size=10 value="" name="onlynumbers" min="0" max="100" required=""><span class="required">*</span></p>

  <p>
    <button>Submit</button>
    <input type="reset" value="Reset">
  </p>
</form>

<div id="average"></div>

Answer 2

An easy fix would be the following:

            function calculator() {
                var average = 0;
    
                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('assign5').value * 1);
                var grade6 = parseFloat(document.getElementById('assign6').value * 1);
                var grade7 = parseFloat(document.getElementById('assign7').value * 1);
                var total = grade1 + grade2 + grade3 + grade4 + grade5 + grade6 + grade7;
                average = total / 7;
    
                if (average > 0) {
                    document.getElementById('lblGrade').innerHTML = 'Your Final Grade = ' + average;
                }
            }

<form>
        <p><b>Name: </b> <input TYPE="TEXT" SIZE="20" NAME="yourname"></p>
    
        <p><b>Assignment 1: </b><input type="number" id="assign1" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>
    
        <p><b>Assignment 2: </b><input type="number" id="assign2" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>
    
        <p><b>Assignment 3: </b><input type="number" id="assign3" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>
    
        <p><b>Assignment 4: </b><input type="number" id="assign4" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>


        <!-- You had the incorrect id names from here and below -->
        <p><b>Midterm Exam: </b><input type="number" id="assign5" size=10 value="" name="onlynumbers" min="0" max="100" required><span class="required">*</span></p>
    
        <p><b>Final Exam: </b><input type="number" id="assign6" size=10 value="" name="onlynumbers" min="0" max="100" required><span class="required">*</span></p>
    
        <p><b>Final Project:</b><input type="number" id="assign7" size=10 value="" name="onlynumbers" min="0" max="100" required=""><span class="required">*</span></p>
    
        <p>
            <!-- Be sure to return false; The return false prevents the page from being navigated and unwanted scrolling of a window to the top or bottom. -->
            <button onclick="calculator(); return false;">Submit</button>
            <input type="reset" value="Reset ">
        </p>
    
        <p>
            <label id="lblGrade"/>
        </p>
</form>

Answer 3

Add <div id="average"> </div> in HTML where you want to display the result, then change the code like below

<button onclick = "calculator()">Submit</button>

<script type="text/javascript">

    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
        // add average value to the average element 
        document.getElementById('average').innerHTML = average;

    }



</script>