How to fix a switch from going to default

user_11677363 0
Viewed 74

My problem is that for some reason the average of the grade does not run through the switch and i believe goes straight to default. How can i fix this little problem. must be a switch statement!

My input for grades is 76,99,85,88,83.

My guess is because my average is a 86.2? so like the decimal? I have tried to add a .0 at the end like i did for my if/ifelse and that seem to work. 

    <head>
        <style>
            hr {
            background-color: black;
            margin: 2px auto;
            width: 100%;
            height: 2px;
            }

            .container{
            width: 500px;
            padding: 15px;
            background-color:   #D3D3D3;
            box-shadow: 10px 10px 5px 0px #8c878c;
            }
            body {
                background-color:   #EEE8AA;
            }
            form  { display: table; }
            p     { display: table-row;  }
            label { display: table-cell; }
            input { display: table-cell; }
        </style>
    </head>
    <body>
        <form name="gradecal">
            <div class="container">
                <p>
                    <label for="a">First Name: </label>
                    <input type="text" name="fname"/>
                </p>
                <p>
                    <label for="a">Last Name: </label>
                    <input type="text" name="lname"/>
                </p>
                <p>
                    <label for="a">Grade #1: </label>
                    <input type="text" name="grd1"/>
                </p>
                <p>
                    <label for="a">Grade #2: </label>
                    <input type="text" name="grd2"/>
                </p>
                <p>
                    <label for="a">Grade #3: </label>
                    <input type="text" name="grd3"/>
                </p>
                <p>
                    <label for="a">Grade #4: </label>
                    <input type="text" name="grd4"/>
                </p>
                <p>
                    <label for="a">Grade #5: </label>
                    <input type="text" name="grd5"/>
                </p>
                <p>
                    <input type="button" value="Submit" onclick="getGrades();" />
                </p>
            </div>
        </form>
        <script>
            function getGrades(){
            // initialize variables
                var fname = 0, lname = 0, grade1 = 0, grade2 = 0, grade3 = 0, grade4 = 0, grade5 = 0, average = 0;

            // assigning varables to textbox value
                firnam = String(document.gradecal.fname.value);
                lasnam = String(document.gradecal.lname.value);
                grade1 = Number(document.gradecal.grd1.value);
                grade2 = Number(document.gradecal.grd2.value);
                grade3 = Number(document.gradecal.grd3.value);
                grade4 = Number(document.gradecal.grd4.value);
                grade5 = Number(document.gradecal.grd5.value);

            // Calculate average
                average = (grade1+ grade2+ grade3+ grade4+ grade5) / 5;
            // if else to determine what grade falls into percentage wise
                var perc = 0;
                if (average >= 90 && average <=100){
                    perc = "100-99.9 %";
                    document.write(perc);
                }
                else if (average >= 80 && average <=89.9){
                    perc = "80-89.9 %";
                    document.write(perc);
                }
                else if (average >= 70 && average <=79.9){
                    perc = "70-79.9 %";
                    document.write(perc);
                }
                else if (average >= 60 && average <=69.9){
                    perc = "60-69.9 %";
                    document.write(perc);
                }
                else {
                    perc = "59.9 % or less";
                    document.write(perc);
                }
            // switch to determine the letter grade
                var letter = 0;
                switch (true){
                    case (average >= 90 && average <= 100):
                        letter = "A";
                        document.write(letter);
                        break;
                    case (average >= 80 && average <= 89.9):
                        letter = "B";
                        document.write(letter);
                        break;
                    case (average >= 70 && average <= 79.9):
                        letter = "C";
                        document.write(letter);
                        break;  
                    case (average >= 60 && average <= 69.9):
                        letter = "D";
                        document.write(letter);
                        break;
                    default:
                        letter = "F";
                        document.write(letter);
                        break;
                }

            // display when submit is clicked
                document.write('<p>First Name: ' + firnam.toUpperCase());
                document.write('<br>Last Name: ' + lasnam.toLowerCase());
                document.write('<br>Grade #1: ' + grade1);
                document.write('<br>Grade #2: ' + grade2);
                document.write('<br>Grade #3: ' + grade3);
                document.write('<br>Grade #4: ' + grade4);
                document.write('<br>Grade #5: ' + grade5);
                document.write('<br>Semester Average: ' + average); 
                document.write('<hr>Based on your semester average, your grade falls between: ' + perc );
                document.write('<br>You have earned a(n): ' + letter + '</p>');
            }
        </script>
    </body>
</html>

expected result is "You have earned a(n): B" the result i am getting is "You have earned a(n): F".(corrected)

Also the perc and letter display in the first line when outputted, how can i only display it once??

html javascript
2 Answers

The problem is the grade variables are undefined and get typecasted to 0 so the average is always 0, hence the default(else) will be set even if you write an if...else

update the code like below;

        if(average >= 90.0)
           letter = "A";
        else if(average >= 80.0)
           letter = "B";
        else if(average >= 70.0)
           letter = "C";
        else if(average >= 60.0)
           letter = "D";
        else
           letter = "F";
        document.write('<br>You have earned a(n): ' + letter);

Update

The problem now is that unless the average is "exactly" 90,80,70 or 60, it will always be the "default" and give you F!

Update

Find the solution: https://jsfiddle.net/ur2nvxg4/2/

Again, if you have to use switch ranges, you must have switch(true) and case average >= value in the code for perc I see a potential error when the value is 89.99% from the code. it has also been modified

user_84535020

Some things could help us:

Why don't you console.log the average, and the typeof average?

There may be 2 issues going on here:

1) The grade variables are not getting the value from each of your inputs. If this is the case, why don't you assign an ID to each input, since they represent a distinct value for each grade.

(If the inputs are dynamically created, you can create an ID for each of them associated with their index).

Lets say that we have :

 <label for="a">Grade #1: </label>
 <input type="text" name="grd1" id="grade1/>

Now we can get the value by doing:

const grade1 = document.querySelector("#grade1").value;

console.log the value of grade1 to make sure you're getting something back.

Also, you have to convert it to a number, as I believe the value is stored as a string.

2) Type mismatch

If you are getting back correct values for grade, try and console log the typeof each grade, and the average.

What could end up happening is that the average is actually a string, because the grades are treated as a string.

user_63086850
Related