CODEWITHSUNDEEP
javascripthtml
Chaz
Chaz

Reputation: 205

Sum of the selected items of a pages drop down menus

My page has a table which has a series of drop down menus in one column (all of which contain a series of numbers), I want to run a function every time one of the values is changed, that takes the sum of the values and displays the result on the page. I believe my function (totalMarks), gets a collection of all my drop down menus, then loops through them, adding to the total the value of the selected index, and then displaying the total marks within a some h2 tags. Is my problem within the summing of the drop down menus or somewhere else?

function markForm(tagID) {
    var x = document.getElementById(tagID)
    var pre = document.createElement("pre");
    x.appendChild(pre);
    var SectionDetails = [
        { name: "Dynamic Table", maxMarks: 20},
        { name: "IntelliJ usage", maxMarks: 10},
        { name: "Calendar Controller", maxMarks: 30},
        { name: "Active Form", maxMarks: 20},
        { name: "Object Database", maxMarks: 20}
    ];
    var table = pre.appendChild(document.createElement("table"));
    var tableHeader = table.appendChild(document.createElement("thead"));
    var tableRow = tableHeader.appendChild(document.createElement("tr"));
    var headRow = tableRow.appendChild(document.createElement("th"));
    headRow.appendChild(document.createTextNode("Section"));
    headRow = tableRow.appendChild(document.createElement("th"));
    headRow.appendChild(document.createTextNode("Max Mark"));
    headRow = tableRow.appendChild(document.createElement("th"));
    headRow.appendChild(document.createTextNode("Comments"));
    headRow = tableRow.appendChild(document.createElement("th"));
    headRow.appendChild(document.createTextNode("Mark"));
    var resultsRows = table.appendChild(document.createElement("tbody"));
    for (var i = 0; i < SectionDetails.length; i++) {
        tableRow = resultsRows.appendChild(document.createElement("tr"));
        var tableData = tableRow.appendChild(document.createElement("td"));
        tableData.appendChild(document.createTextNode(SectionDetails[i].name));
        tableData = tableRow.appendChild(document.createElement("td"));
        tableData.appendChild(document.createTextNode(SectionDetails[i].maxMarks));
        tableData = tableRow.appendChild(document.createElement("td"));
        var tarea = document.createElement("textarea");
        tarea.value = "Enter Comments";
        tableData.appendChild(tarea);
        tableData = tableRow.appendChild(document.createElement("td"));
        var dropDown = document.createElement("select");
        dropDown.name = SectionDetails[i].name;
        dropDown.setAttribute("onchange", totalMarks());
        for (var j = 0; j < (SectionDetails[i].maxMarks + 1); j++) {
            var listItem = new Option(j);
            listItem.value=j;
            dropDown.appendChild(listItem);
        }
        tableData.appendChild(dropDown);
    }
    var h2 = document.createElement("h2");
    h2.id = "headline";
    h2.innerHTML = "Total Marks: 0";
    x.appendChild(h2);
}

function totalMarks() {
    var total = 0;
    var ddmenus = document.getElementsByTagName("select");
    for (var a = 0; a < ddmenus.length; a++) {
        total = total + ddmenus[a].options[ddmenus[a].selectedIndex].value;
    }
    document.getElementsByTagName("h2").innerHTML = "Total Marks: " + total;
}

How the page should look, and does if I don't include the line "document.getElementById("marksline").innerHTML = "Total Marks: " + total;"

How the page looks if I leave the above mentioned line in the code.

Upvotes: 2

Views: 116

Answers (2)

Tallerlei
Tallerlei

Reputation: 219

there are two things to take care of:

  1. parseInt the value of selected option

    total = total + parseInt(ddmenus[a].options[ddmenus[a].selectedIndex].value);

  2. Give the h2 an id (e.g. 'headline') and assign the value with getElementById

    document.getElementById("headline").innerHTML = "Total Marks: " + total;

Edit: for clarification. If you getElementsByTagName you get an array of elements. For assigning a value you need to choose one out of the array e.g. document.getElementByTagName('h2')[0] would be the first h2 on the page.

Upvotes: 1

Mairaj Ahmad
Mairaj Ahmad

Reputation: 14604

You need to parse value of dropdown in integer as value is a string by default.

total = total + parseInt(ddmenus[a].options[ddmenus[a].selectedIndex].value);

Upvotes: 1

Related Questions