Darkenvar Darkenvar - 2 months ago 8
HTML Question

HTML/Javascript Grade Average Calculation

I am currently writing a program in HTML/JavaScript and have been fighting it for several days with hours of research and studying without resolution. My program/site has a table that asks the user to enter their grades for 4 different categories. Then upon clicking the button to calculate the average it is supposed to take those 4 values, and then average them with the correct weighting, and then display the output in a new page division. I am not able to get the output to display and I can't figure out why.

I apologize if this is dead simple and has been answered before.

<html>
<head>
<title> Grade Average Calculator </title>
</head>

<body>

<p>
<h2>Grade Average Calculator</h2>
<h3>Please Enter Your Grade For Each Section</h3>
<TABLE BORDER=2 CELLSPACING=2 CELLPADDING=2>

<tr>
<td>Type</td>
<td>Weight</td>
<td>Grade</td>
</tr>

<tr>
<td>Homework</td>
<td>25%</td>
<td><input type="text" id="homework" size=2 value=""></td>
</tr>

<tr>
<td>Labs</td>
<td>20%</td>
<td><input type="text" id="labs" size=2 value=""></td>
</tr>

<tr>
<td>Midterm</td>
<td>25%</td>
<td><input type="text" id="midterm" size=2 value=""></td>
</tr>

<tr>
<td>Final Exam</td>
<td>30%</td>
<td><input type="text" id="finals" size=2 value=""></td>
</tr>

<br><br>
</p>
<input type="button" value="Calculate Your Grade"
onclick="calculator()">

<hr>
<div id="outputDiv" style="height: 50px; width: 100%;"></div>

<script type="text/javascript">

function calculator()
{
var grade1=parseFloat(document.getElementById('homework').value*0.25);
var grade2=parseFloat(document.getElementById('labs').value*0.20);
var grade3=parseFloat(document.getElementById('midterm').value*0.25);
var grade4=parseFloat(document.getElementById('finals').value*0.30);
var total=grade1+grade2+grade3+grade4;

var display=document.getElementById('outputDiv')display.innerHTML='Your Final Grade Is: ';
}
</script>
</body>



gh9 gh9
Answer

I updated your code to work. The issue being you never displayed the total, you just displayed

'Your final Grade Is: '

<html>
<head>
    <title> Grade Average Calculator </title>
</head>

<body>

<p>
    <h2>Grade Average Calculator</h2>
    <h3>Please Enter Your Grade For Each Section</h3>
    <TABLE BORDER=2 CELLSPACING=2 CELLPADDING=2>

    <tr>
    <td>Type</td>
    <td>Weight</td>
    <td>Grade</td>
    </tr>

    <tr>
    <td>Homework</td>
    <td>25%</td>
    <td><input type="text" id="homework" size=2 value=""></td>
    </tr>

    <tr>
    <td>Labs</td>
    <td>20%</td>
    <td><input type="text" id="labs" size=2 value=""></td>
    </tr>

    <tr>
    <td>Midterm</td>
    <td>25%</td>
    <td><input type="text" id="midterm" size=2 value=""></td>
    </tr>

    <tr>
    <td>Final Exam</td>
    <td>30%</td>
    <td><input type="text" id="finals" size=2 value=""></td>
    </tr>

    <br><br>
</p>
    <input type="button" value="Calculate Your Grade"
        onclick="calculator()">

    <hr>
    <div id="outputDiv" style="height: 50px; width: 100%;"></div>

    <script type="text/javascript">

        function calculator()
        {
            var grade1=parseFloat(document.getElementById('homework').value*0.25);
            var grade2=parseFloat(document.getElementById('labs').value*0.20);
            var grade3=parseFloat(document.getElementById('midterm').value*0.25);
            var grade4=parseFloat(document.getElementById('finals').value*0.30);
            var total=grade1+grade2+grade3+grade4;

            var display=document.getElementById('outputDiv');

            display.innerHTML='Your Final Grade Is: ' +total;
        }
    </script>
Comments