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

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>

 <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>

Share Improve this question edited Oct 27, 2023 at 13:27 Nimantha 6,4966 gold badges31 silver badges76 bronze badges asked Oct 29, 2018 at 18:35 Wilson 351 gold badge1 silver badge6 bronze badges

Your onclick function is not from this world :D. What you have given is a expression in onlclick function. Remove the expression and just add yout function name with some params if any. – Mukesh Verma Commented Oct 29, 2018 at 18:44
1 simple use onclick='calculator()' and in that function use console.log just to test if that function is calling correctly and after that do your other stuff. – Naveed Ali Commented Oct 29, 2018 at 18:58
now if it's working fine, then get the values of every input through their ids and then add all of them in one variable and extract an average of it. after that create a div tag and give it any id and put the result in that div through their id. – Naveed Ali Commented Oct 29, 2018 at 19:04
Can't work fine because the id's do not match. – Moojjoo Commented Oct 30, 2018 at 18:25

Add a ment |

3 Answers 3

Sorted by: Reset to default 1

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>

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>

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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

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

3 Answers 3

与本文相关的文章

评论列表(0)