Is there a way to use a switch statement in JavaScript with a variable to display text based on another variable

Question

I am trying to get a switch statement to use a variable called "avg" for the average of five grades. The five grades are added together to get the total and then divided by five to get the average. Like this:

avg = +grade_one + +grade_two + +grade_three + +grade_four + +grade_five;

The switch needs to display five cases, one for each grade range, (i.e 90% to 100% = A). As well as the percentage itself.

I have tried using cases with numeric values like "case 1" for example, and then printing two lines of text but that won't work.

Should I try using an if-else structure before the switch to establish what each grade percentage equals in a letter, or will that not work?

Here is the code for the switch.

switch (avg)
{
case 1:
letter = "A";
per = "90-100";
document.write("Based on your semester average, your grade 
falls between " + per + "%");
document.write("you earned a " + letter);
break;

case 2:
letter = "B";
per = "80-89.9";
document.write("Based on your semester average your grade falls between " + per + "%");
document.write("you earned a " + letter);
break;

case 3:
letter = "A";
per = "70-79.9";
document.write("Based on your semester average your grade falls between " + per + "%");
document.write("you earned a " + letter);
break;

case 4:
letter = "D";
per = "60-69.9";
document.write("Based on your semester average your grade falls between " + per + "%");
document.write("you earned a " + letter);
break;

case 5:
letter = "F";
per = "Below 60%";
document.write("Based on your semester average your grade falls between " + per + "%");
document.write("you earned a " + letter);

default:
document.write("Invalid Entry");
break; 
}  

Answer 1

You should not use a switch for that: the code for each case is too similar. The difference is just in a few values, which you can store in an array. Then find in that array in which segment the average falls, and build the output from that.

Also, don't use document.write for this. Instead create an element (like a div) that will contain the output message.

I don't know what the context is of your exercise, but I suppose there are some inputs with the 5 grades. Load those as an array (not as 5 distinct variables), and calculate the average in a generic way (not tied to 5).

Here is some suggested code in a runnable snippet:

let thresholds = [100.1, 90, 80, 70, 60, 0];
let inputs = document.querySelectorAll("input");
let output = document.querySelector("div");
let button = document.querySelector("button");

button.addEventListener("click", function () {
    let grades = Array.from(inputs, inp => +inp.value);
    let avg = grades.reduce((a, b) => a + b) / grades.length;
    let i = thresholds.findIndex(min => avg >= min);
    let letter = "-ABCDF"[i];
    let low = thresholds[i];
    let high = thresholds[i - 1] - 0.1;
    let msg = `Based on your semester average, your grade falls between ${low}-${high}%\nYou earned a ${letter}.`;
    output.textContent = msg;
});

Grades:
<ul>
<li><input type="number" min="0" max="100" value="80" size="4">
<li><input type="number" min="0" max="100" value="80" size="4">
<li><input type="number" min="0" max="100" value="80" size="4">
<li><input type="number" min="0" max="100" value="80" size="4">
<li><input type="number" min="0" max="100" value="80" size="4">
</ul>
<button>Get grade</button>
<div></div>