Displaying if...else result in HTML

Question

Could anyone help me figure out a better way of returning the right message based on my if...else logic? So I'm trying to calculate a student's GPA via dropdown menus. Each letter is your standard fare (A = 4.0, B = 3.5, etc). Now, if a student has a calculated GPA that is >= 3.5, I want to display a certain message. If It's anything lower, I'd display another message. I'm having a hard time figuring out how to print the message based on the condition.

    function letterToGrade(gpa){
var grade;
switch (gpa) 
    {
    case "A": grade = 4.0;
        break;
    case "B": grade = 3.0;
        break;
    case "C": grade = 2.0;
        break;
    case "D": grade = 1.0;
        break;
    case "F": grade = 0.0;
        break;
    }
    return grade;
}

function calculateGPA(){

var numOfRequisites = 5;
var gpa1 = letterToGrade(document.getElementById("Foundation").value);
var gpa2 = letterToGrade(document.getElementById("Database").value);
var gpa3 = letterToGrade(document.getElementById("Elect").value);
var gpa4 = letterToGrade(document.getElementById("Commerce").value);
var gpa5 = letterToGrade(document.getElementById("HealthInfo").value);
var gpaTotal = (gpa1 + gpa2 + gpa3 + gpa4 + gpa5)/numOfRequisites ;
var result = "<p>Your calculated GPA is: "+(gpaTotal.toFixed(1))+"<br></p>";
if (gpaTotal >= 3.5)
    return result += "<p>Congratulations! Based on your GPA, we will move forward with your application " + 
"for this prestigious internship program.</p>";
else 
    return result += "<p>Thank you for your interest in this program. Unfortunately at this time, " +
"we are unable to continue with your application due to our strict GPA standards. Please try again " + 
"at a later time.</p>";
document.getElementById("result").innerHTML=result;
}

And here's the HTML. Not all of it.

<h4>Thank you for your interest in our summer internship program. Please enter your GPA for the following courses. </h4>
<p>
IT 3503 Foundation of HIT:
<select id="Foundation">
<option> </option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>F</option>
</select>
    <br/>
IT 4153 Advanced Database:
<select id="Database">
<option> </option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>F</option>
</select>
    <br/>
IT 4513 Elect Health Rec Sys & Ap:
<select id="Elect">
<option> </option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>F</option>
</select>
    <br/>
IT 4123 Electronic Commerce:
<select id="Commerce">
<option> </option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>F</option>
</select>
    <br/>
IT 4533 Health Info Sec & Priv:
<select id="HealthInfo">
<option> </option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>F</option>
</select>
    <br/>
</form>
<input type="button" value="Submit" onclick="calculateGPA()" />

</p>

The last part kind of messes me up. I'm pretty new to HTML and Javascript. This is for a school assignment, so please feel free to insult me as you will for being a slacker.

What is supposed to happen and what do you see happening instead? — Avalanche
– Avalanche, Commented Jan 31, 2014 at 3:41
Use a local variable to store the grade or multiple functions. Right now calculategpa returns the grade only. The rest of the function will not run as a result. But then again Where is the function getting the grade? — Dom
– Dom, Commented Jan 31, 2014 at 3:44
On the actual HTML page, nothing is happening, and with the way my Jscript is now, I don't expect anything to happen. There's no way the browser can tell which message I want to display. — HanH1113
– HanH1113, Commented Jan 31, 2014 at 3:44
you have switch(grade) but i do not see grade being defined anywhere, and you return right after the switch so the rest is not executed. — Patrick Evans
– Patrick Evans, Commented Jan 31, 2014 at 3:45

Patrick Evans · Accepted Answer · 2014-01-31 04:00:22Z

you have several problems

grade is never defined
you return before the other code can be executed
numGrade is undefined. probably mean for CalculateGPA to be numGrade, or vise versa

So

function CalculateGPA(){
    //grade here is undefined as it isnt declared before here
    switch (grade) {
        case "A": 
            grade = 4.0;
        break;
        case "B": 
            grade = 3.0;
            break;
        case "C": 
            grade = 2.0;
        break;
        case "D": 
            grade = 1.0;
        break;
        case "F": 
            grade = 0.0;
            break;
        }
        return grade; //you return here so any code after this is never executed
    var numOfRequisites = 5;
    var gpa1 = numGrade(document.getElementById("Foundation").value);
    var gpa2 = numGrade(document.getElementById("Database").value);
    var gpa3 = numGrade(document.getElementById("Elect").value);
    var gpa4 = numGrade(document.getElementById("Commerce").value);
    var gpa5 = numGrade(document.getElementById("HealthInfo").value);
    var gpaTotal = (gpa1 + gpa2 + gpa3 + gpa4 + gpa5)/numOfRequisites ;
    if (gpaTotal >= 3.5)
        return acceptanceMessage;
    else 
        return consolationMessage;
    //document.getElementById("result").innerHTML=message;
}

i think you want:

function numGrade(gpa){
   switch (gpa) {
      case "A": gpa = 4.0;
      break;
      case "B": gpa = 3.0;
      break;
      case "C": gpa = 2.0;
      break;
      case "D": gpa = 1.0;
      break;
      case "F": gpa = 0.0;
      break;
    }
    return gpa;
}

function calculateGradeAndGenMessage(){
    var numOfRequisites = 5;
    var gpa1 = numGrade(document.getElementById("Foundation").value);
    var gpa2 = numGrade(document.getElementById("Database").value);
    var gpa3 = numGrade(document.getElementById("Elect").value);
    var gpa4 = numGrade(document.getElementById("Commerce").value);
    var gpa5 = numGrade(document.getElementById("HealthInfo").value);
    var gpaTotal = (gpa1 + gpa2 + gpa3 + gpa4 + gpa5)/numOfRequisites ;
    if (gpaTotal >= 3.5)
        return acceptanceMessage;
    else 
        return consolationMessage;
}

document.getElementById("result").innerHTML=calculateGradeAndGenMessage();

Whenever there's an and in your function names, there's something wrong with your design ;)
@plalx Thanks! Tips like these are very useful for a newbie like me. So functions should do one thing at most huh?

Dom · Accepted Answer · 2014-01-31 04:10:34Z

As stated in the comments, you never defined gpa. However, I noticed you wanted to clean up your code a bit...I recommend going about this by breaking it up into two functions:

DEMO: http://jsfiddle.net/dirtyd77/Q86gt/4/

JAVASCRIPT:

//Calculate average GPA of 5 classes. 
//If avereage GPA >= 3.5, show acceptance message.
//Else thank for applying. 
var consolationMessage = "<p>Thank you for your interest in this program. Unfortunately at this time, " +
    "we are unable to continue with your application due to our strict GPA standards. Please try again " +
    "at a later time.";

var acceptanceMessage = "Congratulations! Based on your GPA, we will move forward with your application " +
    "for this prestigious internship program."

    //get the gpa
    function getGPA() {
        var gpaTotal = null,
            message = null,
            classes = ['Foundation', 'Database', 'Elect', 'Commerce', 'HealthInfo'];

        //iterate over classes
        for (var i = 0; i < classes.length; i++) {
            var gpa = calculateGPA(document.getElementById(classes[i]).value);
            gpaTotal += gpa;
        }
        //gpaTotal divided by number of classes
        gpaTotal /= classes.length;

        //if not all values are filled out, alert and return
        if (isNaN(gpaTotal)) {
            alert('Please fill out all answers!');
            return;
        }

        if (gpaTotal >= 3.5) message = acceptanceMessage;
        else message = consolationMessage;

        document.getElementById("result").innerHTML = message;
    }

    function calculateGPA(gpa) {
        switch (gpa) {
            case "A":
                gpa = 4.0;
                break;
            case "B":
                gpa = 3.0;
                break;
            case "C":
                gpa = 2.0;
                break;
            case "D":
                gpa = 1.0;
                break;
            case "F":
                gpa = 0.0;
                break;
        }
        return gpa;
    }

HTML:

<h4>Thank you for your interest in our summer internship program. Please enter your GPA for the following courses. </h4>

<p>IT 3503 Foundation of HIT:</p>
<select id="Foundation">
    <option></option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
    <option>F</option>
</select>
<p>IT 4153 Advanced Database:</p>
<select id="Database">
    <option></option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
    <option>F</option>
</select>
<p>IT 4513 Elect Health Rec Sys & Ap:</p>
<select id="Elect">
    <option></option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
    <option>F</option>
</select>
<p>IT 4123 Electronic Commerce:</p>
<select id="Commerce">
    <option></option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
    <option>F</option>
</select>
<p>IT 4533 Health Info Sec & Priv:</p>
<select id="HealthInfo">
    <option></option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
    <option>F</option>
</select>
<input type="button" value="Submit" onclick="getGPA()" />
<p id="result"></p>

Hope this helps and let me know if you have any questions.

SomeShinyObject · Accepted Answer · 2014-01-31 04:24:27Z

I missed this return statement originally but you return gpa after your switch statement.

This will cause your function to end as it has been returned already.

Then after return gpa you have two other unnecessary return statements in your if block.

You should break up the calculation of the GPA and the message generation separately.

function calculateGPA(letterGrade) {
    var gpa;
    switch (letterGrade) {
        case 'A':
            gpa = 4.0;
            break;
        case 'B':
            gpa = 3.0;
            break;
        case 'C':
            gpa = 2.0;
            break;
        case 'D':
            gpa = 1.0;
            break;
        case 'F':
            gpa = 0.0;
            break;
    }

    return gpa;
}

function averageGPA() {
    var gpas = [],
        sum = 0,
        numberGPA;

    gpas.push(calculateGPA(document.getElementById("Foundation").value));
    gpas.push(calculateGPA(document.getElementById("Database").value));
    gpas.push(calculateGPA(document.getElementById("Elect").value));
    gpas.push(calculateGPA(document.getElementById("Commerce").value));
    gpas.push(calculateGPA(document.getElementById("HealthInfo").value));

    for (var i = gpas.length - 1; i >= 0; i--) {
        sum += gpas[i]
    };

    return sum / gpas.length;
}

function passMessage(gpa) {
    var result = document.getElementById('result'),
        message;

    if (gpa >= 3.5) {
        message = "Congratulations! Based on your GPA, we will move forward with your application " +
            "for this prestigious internship program.";
    } else if (gpa < 3.5) {
        message = "Thank you for your interest in this program. Unfortunately at this time, " +
            "we are unable to continue with your application due to our strict GPA standards. Please try again " +
            "at a later time";
    }

    result.innerHTML = message;
}

function checkGPAResults() {
    passMessage(averageGPA());   
}

And a fiddle

Collectives™ on Stack Overflow

Displaying if...else result in HTML

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related