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

admin管理员组

文章数量:1026062

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>

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>

• javascript
• html
• input
• element

Share Improve this question Follow edited Oct 27, 2023 at 13:27 Nimantha 6,49666 gold badges3131 silver badges7676 bronze badges asked Oct 29, 2018 at 18:35 WilsonWilson 3511 gold badge11 silver badge66 bronze badges 4

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

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>

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>

• javascript
• html
• input
• element

Share Improve this question Follow edited Oct 27, 2023 at 13:27 Nimantha 6,49666 gold badges3131 silver badges7676 bronze badges asked Oct 29, 2018 at 18:35 WilsonWilson 3511 gold badge11 silver badge66 bronze badges 4

• 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 HTMLStack Overflow