user input of the students grades into an output as a text box then compute the final letter grade

Question

I need to make the JS code I've gotten so far output to a text box (that's read-only) instead of displayed on the page after clicking the GPA submit button.

I also need help figuring out how to take the GPA that is calculated and outputted to that text box rounded up to the nearest whole number and pasted into a grade letter format instead of a number.

Something like:
"you got a 97 percent, which means you get an A"
or
"you got an 80 percent which means you get a B"

Here are the percent equivalents broken down:

90-100 A
80-89  B
70-79  C
60-69  D
0-59   F

*If the student's final grade is 'D' or 'F' the text should read something like "Student has failed and must retake the course"

 <h1>Student Grades</h1> <h2>Please Enter Your Percentage For Course Section</h2> <label>Homework</label> <input type="number" id="hmwk" size=2 value="hmwk"> <br> <label>Midterm</label> <input type="number" id="mdtm" size=2 value="mdtm"> <br> <label>Final</label> <input type="number" id="final" size=2 value="final"> <br> <label>Part</label> <input type="number" id="prtc" size=2 value="prtc"> <br> <input type="button" value="GPA" onclick="grade()"> <div id="outputDiv" style="height: 50px; width: 100%;"></div> <script type="text/javascript"> function grade() { var grd1 = parseFloat(document.getElementById('hmwk').value * 0.5); var grd2 = parseFloat(document.getElementById('mdtm').value * 0.2); var grd3 = parseFloat(document.getElementById('final').value * 0.2); var grd4 = parseFloat(document.getElementById('prtc').value * 0.1); var total = grd1 + grd2 + grd3 + grd4; var display = document.getElementById('outputDiv'); display.innerHTML = 'Your Final Grade Is: ' + total; } </script>

Answer 1

<script>
var gradePercentageOriginal; //percentage of grade

var gradePercentage = Math.ceil(gradePercentage);

var letterGrade;

if (gradePercentage <= 90) {
   letterGrade = "A";
}else if (89 <= gradePercentage && gradePercentage <= 80) {
   letterGrade = "B";
}else if (79 <= gradePercentage && gradePercentage <= 70) {
   letterGrade = "C";
}else if (69 <= gradePercentage && gradePercentage <= 60) {
   letterGrade = "D";
}else {
   letterGrade = "F";
}

display.innerHTML = 'Your Final Grade Is: ' + letterGrade;

</script>

You could also create a switch statement:

switch(true) {
 case(gradePercentage <= 90):
   letterGrade = "A";
   break;
  .
  .
  .
 case(gradePercentage <= 69 && gradePercentage => 60):
   letterGrade = "D";
   break;
 default:
   letterGrade = "F";
   break;
}

I hope this solves your problem.

Answer 2

If you don't mind to use switch statements, this should do the trick:

 <h1>Student Grades</h1> <h2>Please Enter Your Percentage For Course Section</h2> <label>Homework</label> <input type="number" id="hmwk" size=2 value="hmwk"> <br> <label>Midterm</label> <input type="number" id="mdtm" size=2 value="mdtm"> <br> <label>Final</label> <input type="number" id="final" size=2 value="final"> <br> <label>Part</label> <input type="number" id="prtc" size=2 value="prtc"> <br> <input type="button" value="GPA" onclick="grade()"> <div id="outputDiv" style="height: 50px; width: 100%;"></div> <script type="text/javascript"> function grade() { var grd1 = parseFloat(document.getElementById('hmwk').value * 0.5); var grd2 = parseFloat(document.getElementById('mdtm').value * 0.2); var grd3 = parseFloat(document.getElementById('final').value * 0.2); var grd4 = parseFloat(document.getElementById('prtc').value * 0.1); var total = grd1 + grd2 + grd3 + grd4; var display = document.getElementById('outputDiv'); let msg = ''; let grade = 0; switch (true) { case (total >= 90 && total <= 100): grade = "A"; break; case (total >= 80 && total <= 89): grade = "B"; break; case (total >= 70 && total <= 79): grade = "C"; break; case (total >= 60 && total <= 69): grade = "D"; break; case (total >= 0 && total <= 59): grade = "F"; break; default: grade = "F"; break; } msg = "you got a " + total + " percent, which means you get an " + grade; display.innerHTML = 'Your Final Grade Is: ' + total + "<br/>" + msg; } </script>

Answer 3

 <h1>Student Grades</h1> <h2>Please Enter Your Percentage For Course Section</h2> <label>Homework</label> <input type="number" id="hmwk" size=2 value="hmwk"> <br> <label>Midterm</label> <input type="number" id="mdtm" size=2 value="mdtm"> <br> <label>Final</label> <input type="number" id="final" size=2 value="final"> <br> <label>Part</label> <input type="number" id="prtc" size=2 value="prtc"> <br> <input type="button" value="GPA" onclick="grade()"> <div id="outputDiv" style="height: 50px; width: 100%;"></div> <script type="text/javascript"> function grade() { var grd1 = parseFloat(document.getElementById('hmwk').value * 0.5); var grd2 = parseFloat(document.getElementById('mdtm').value * 0.2); var grd3 = parseFloat(document.getElementById('final').value * 0.2); var grd4 = parseFloat(document.getElementById('prtc').value * 0.1); var total = grd1 + grd2 + grd3 + grd4; var display = document.getElementById('outputDiv'); let msg = ''; let grade = 0; switch (true) { case (total >= 90 && total <= 100): grade = "A"; break; case (total >= 80 && total <= 89): grade = "B"; break; case (total >= 70 && total <= 79): grade = "C"; break; case (total >= 60 && total <= 69): grade = "D"; break; case (total >= 0 && total <= 59): grade = "F"; break; default: grade = "F"; break; } msg = "you got a " + total + " percent, which means you get an " + grade; display.innerHTML = 'Your Final Grade Is: ' + total + "<br/>" + msg; } </script>