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>

Answer 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");
        }

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

Answer 3

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