javascript - 页面下拉菜单中所选项目的总和

Question

我的页面有一个表格，其中一列中有一系列下拉菜单(所有这些菜单都包含一系列数字)，我想在每次更改其中一个值时运行一个函数，该函数的总和为值并将结果显示在页面上。我相信我的函数(totalMarks)获取所有下拉菜单的集合，然后循环遍历它们，将所选索引的值添加到总计中，然后在一些 h2 标签中显示总分。我的问题是在下拉菜单的求和中还是在其他地方？

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;
}

页面应该如何显示，以及如果我不包含行“document.getElementById("marksline").innerHTML = "Total Marks: "+ total;"

如果我在代码中保留上述行，页面会是什么样子。

Answer 1

有两件事需要注意:

1. parseInt 所选选项的值

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

2. 为 h2 指定一个 ID(例如“标题”)并使用 getElementById 分配该值

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

编辑:为了澄清。如果您getElementsByTagName，您将获得一个元素数组。要分配一个值，您需要从数组中选择一个，例如document.getElementByTagName('h2')[0] 将是页面上的第一个 h2。