пользовательский ввод оценок учеников в вывод в виде текстового поля, а затем вычисление итоговой оценки букв

Question

Мне нужно, чтобы код JS, который я получил до сих пор, выводился в текстовое поле (только для чтения) вместо того, чтобы отображаться на странице после нажатия кнопки отправки GPA.

Мне также нужна помощьвыяснить, как взять GPA, который вычисляется и выводится в это текстовое поле, округляется до ближайшего целого числа и вставляется в формат буквы класса вместо числа.

Что-то вроде:
«Вы получили 97 процентов, что означает, что вы получили A»
или
«Вы получили 80 процентов, что означает, что вы получили B»

Здесьпроцентные эквиваленты с разбивкой:

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

* Если итоговая оценка учащегося - «D» или «F», текст должен гласить что-то вроде «Ученик провалился и должен повторно пройти курс»

<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

Если вы не возражаете против использования операторов switch, это должно сработать:

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

<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

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

Вы также можете создать оператор switch:

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

Надеюсь, это решит вашу проблему.