Javascript IF ELSE statement stopping short

Question

So we have here my code for a GPA calculator. Ive got everything in line but I cant seem to figure out why my IF ELSE statement is stopping short and converting all letter grades to a value of "4".

I have tried putting the statement outside of the for loop that is handling the grades and pushing them to to gVals[] I have tried putting them completely outside of the function in their own function. I have tried alot of different things except apparently the thing that works.

I know there are simple ways of doing this but I am trying to execute this app with a minimalist mentality.

The code:

    function calcGPA() {
    //Variable Sections
    var grades = document.querySelectorAll("#letGrade input[type=text]");
    var contacts = document.querySelectorAll("#conHours input[type=text]");
    var gVals = [];
    var cVals = [];
    var failGrade = "The Letter Grade input may only be capitol letters A,B,C,D or F";
    var failHours = "The Contact Hours input may only be 1, 2, 3, 4 or 5";
    var checkGrade = /^[ABCDF]/;
    var checkhours = /^[12345]/;
    //Grab the Letter grades and process them
    //Should validate all inputs in the letGrade div to capitol A, B, C, D or F
    //Should Convert all inputs in the LetGrade div to A = 4,B = 3,C = 2,D = 1,F = 0
    //Should push resulting conversion to gVals[]
    for (var i = 0; i < grades.length; i++) {
        if (!checkGrade.test(grades[i].value)) {
            alert(failGrade);
            return false;
        }
             if (grades[i].value == "A"){
                gVals.push("4");
            }
            else if (grades[i].value == "B"){
                gVals.push("3");
            }
            else if (grades[i].value == "C"){
                gVals.push("2");
            }
            else if (grades[i].value == "D"){
                gVals.push("1");
            }
            else if (grades[i].value == "F"){
                gVals.push("0");
            }
        //Should validate all inputs in the conHours div to 1, 2, 3, 4 or 5
        //Should push all resulting values to cVals[]
        if (!checkhours.test(contacts[i].value)) {
            alert(failHours);
            return false;
        }
        cVals.push(contacts[i].value);
    }
    console.log(gVals, cVals);
    document.getElementById("cumGPA").innerHTML = (gVals[0] * cVals[0]);
};

The issue I am having is that the IF ELSE statement to do the conversion from letter grade to quality point value is returning everything back as 4 instead of matching it with its resulting letter grade componant.

Thank you for any help with this in advanced and please if you could dont answer the question outright please explain where I went wrong so I can learn from this.

EDIT: ADDED HTML FOR PROSPERITY! AND "FIXED" JAVASCRIPT!

<div id="calcWrapper">
    <form id="calc" name="calc" onsubmit="calcGPA(); return false;">
        <div id="letGrade">
            <input tabindex="1" type="text" maxlength="1" placeholder="Letter Grade..." />
            <input tabindex="3" type="text" maxlength="1" placeholder="Letter Grade..." />
            <input tabindex="5" type="text" maxlength="1" placeholder="Letter Grade..." />
            <input tabindex="7" type="text" maxlength="1" placeholder="Letter Grade..." />
            <input tabindex="9" type="text" maxlength="1" placeholder="Letter Grade..." />
            <input tabindex="11" type="text" maxlength="1" placeholder="Letter Grade..." />
            <label>Cumulative GPA:</label><output id="cumGPA" type="text" />
        </div>
        <div id="conHours">
            <input tabindex="2" type="text" maxlength="1" placeholder="Contact Hours..." />
            <input tabindex="4" type="text" maxlength="1" placeholder="Contact Hours..." />
            <input tabindex="6" type="text" maxlength="1" placeholder="Contact Hours..." />
            <input tabindex="8" type="text" maxlength="1" placeholder="Contact Hours..." />
            <input tabindex="10" type="text" maxlength="1" placeholder="Contact Hours..." />
            <input tabindex="12" type="text" maxlength="1" placeholder="Contact Hours..." />
            <input type="submit" value="Calculate" />
        </div>
    </form>
</div>

It might have something to do with using a nested loop where both loops use the value i as the index. — Andy
– Andy, Commented Nov 23, 2013 at 17:21
Also, I'm not clear as to why the nested loop is necessary. Surely one would do the trick. — Andy
– Andy, Commented Nov 23, 2013 at 17:33
Yes the nested loop was redundant. I get loop happy sometimes, but I just like them! — Otis Eugene Anderson
– Otis Eugene Anderson, Commented Nov 23, 2013 at 20:16

EmptyArsenal · Accepted Answer · 2013-11-23 17:19:38Z

2

The reason why it's not working is because in your if statement, you're using a single equals. A single equals is setting grades[i] equal to 'A' - it's not actually evaluating grades[i] == 'A'.

answered Nov 23, 2013 at 17:19

EmptyArsenal

7,4964 gold badges40 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rahul Tripathi · Accepted Answer · 2013-11-23 18:17:14Z

2

You want to change single = to == for comparison

if (grades[i] == 'A'){

Something like this in your code:

    if (grades[i] == 'A'){
            gVals.push("4");
        }
        else if (grades[i] == 'B'){
            gVals.push("3");
        }
        else if (grades[i] == 'C'){
            gVals.push("2");
        }
        else if (grades[i] == 'D'){
            gVals.push("1");
        }
        else if (grades[i] == 'F'){
            gVals.push("0");
        }

Note:-

Double equality == is used for comparison and single = is used for assignment in Javascript.

Also as Andy well pointed that in comments that your both the for loops are using the same index i which may cause problem to you(atleast not a good practice). It would be better if you create a new variable for second for loop. It is unclear what you want to achieve with both the for loops but I think that it can be done with single for loop also.

edited Nov 23, 2013 at 18:17

answered Nov 23, 2013 at 17:19

Rahul Tripathi

173k33 gold badges292 silver badges341 bronze badges

1 Comment

Rahul Tripathi Over a year ago

@Andy:- Didnt get that very clearly. Is it that I missed something or wrote something wrong in my answer?

VitaliyG · Accepted Answer · 2013-11-23 18:39:17Z

1

As it was pointed in other answers you should use comparison operator == instead of assign operator = in if conditions, and also don't forget that grades[i] are DOM objects and not some plain values - so you have to compare with some property of this objects (if you want to compare with input's text use value property)

      if (grades[i].value == "A"){
            gVals.push("4");
        }
        else if (grades[i].value == "B"){
            gVals.push("3");
        }

answered Nov 23, 2013 at 18:39

VitaliyG

1,8571 gold badge11 silver badges11 bronze badges

3 Comments

Otis Eugene Anderson Over a year ago

Ok so I did that and it makes sense that I am not calling any actual useable value into the comparison. However taking this into account and adding it as well as getting rid of the nested for loop and now I am still only getting 4 returned for all of the letGrade inputs regardless of what is going into them. It is evaluating everything to 4 instead of changing it to what it should be.

VitaliyG Over a year ago

can you check what is displayed by console.log(grades[i].value) and console.log(grades[i].value == "A"), just put it before ifs

Otis Eugene Anderson Over a year ago

Well there you have it. I got to looking at all of this and found that I had = in the initial if so it was setting all of them to A still. Thank you!!!!! There have been two parts to the answer that got it done.

Collectives™ on Stack Overflow

Javascript IF ELSE statement stopping short

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related