Javascript/DOM: On a dynamically created form text object, how do you reference the value via DOM?

Question

I have an array that looks like this:

grades[0] = ["A", 4.0, 0, "a"];
grades[1] = ["A-", 3.67, 0, "a-minus"];
grades[2] = ["B+", 3.33, 0, "b-plus"];
grades[3] = ["B", 3.0, 0, "b"];
grades[4] = ["B-", 2.67, 0, "b-minus"];
grades[5] = ["C+", 2.33, 0, "c-plus"];
grades[6] = ["C", 2.0, 0, "c"];
grades[7] = ["C-", 1.67, 0, "c-minus"];
grades[8] = ["D+", 1.33, 0, "d-plus"];
grades[9] = ["D", 1.0, 0, "d"];
grades[10] = ["D-", 0.67, 0, "d-minus"];
grades[11] = ["F", 0.0, 0, "f"];

and a dynamic form that looks like this:

function loadButtons() {
    var myDiv = document.getElementById("divMain");
    var myTable = document.createElement("table");
    myTable.id = "grades";
    myTable.border = 1;
    myTable.padding = 5;
    var myTbody = document.createElement("tbody");

    for (var i=0; i < grades.length; i++) {
        var myTr = document.createElement("tr");
        var myTd1 = document.createElement("td");
        var myTd2 = document.createElement("td");
        var myTd3 = document.createElement("td");
        var myTd4 = document.createElement("td");

        var myButton = document.createElement('input');
        myButton.type = 'button';
        myButton.name = grades[i][1];
        myButton.value = "+";
        myButton.onclick = function (){addGrade(this)};
        myTd1.appendChild(myButton);
        myTr.appendChild(myTd1);

        myTd2.appendChild(document.createTextNode(grades[i][1]));
        myTr.appendChild(myTd2);

        myTd3.appendChild(document.createTextNode(grades[i][2]));
        myTr.appendChild(myTd3);

        var myButton = document.createElement('input');
        myButton.type = 'text';
        myButton.name = grades[i][1];
        myButton.id = grades[i][3];
        myButton.size = "4";
        myButton.onblur = function (){addGradeX(this)};
        myTd4.appendChild(myButton);
        myTr.appendChild(myTd4);

        myTbody.appendChild(myTr);
        myTable.appendChild(myTbody);
        myDiv.appendChild(myTable);
    }
}

And I'm trying to update the value of the button in Td4 (the last button) using this:

function writeGrades() {    
    clearForm();

    for (var x=0; x < grades.length; x++) {
        if (grades[x][2] > 0) {
            for (var i=1; i <= grades[x][2]; i++) {
                sGradeLog += grades[x][0] + ",";
                sGradeValLog += grades[x][1] + ",";

                iCumTotal += grades[x][1];
                iNumOfGrades += 1;
            }
        }
    }


    for (var x=0; x < grades.length; x++) {  //**this loop is where I'm trying to make this happen**
        var myVal = grades[x][3];
        var myEl = getElementById(document.form.myVal.value);
        document.form.myEl.value = grades[x][2];
    }

    iGPA = iCumTotal / iNumOfGrades;                

    document.form.GPA.value = iGPA.toFixed(3);
    document.form.cumTotal.value = iCumTotal.toFixed(3);
    document.form.numOfGrades.value = iNumOfGrades;

    document.form.gradeLog.value = sGradeLog;
    document.form.gradeValLog.value = sGradeValLog;
}

I have tried many different ways of access the document.form.grades[x][3].value DOM object but it doesn't like the array reference not being an object. My most recent attempt was adding the .id value to the button and then trying to use getElementById() but that didnt' work either.

I'm a novice at JS so please assist where you can. TIA!

Answer 1

Like this : document.form[grades[x][3]].value ?