Сумма выбранных элементов выпадающих меню страниц

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 = " Всего Marks:" + общий;"

Как выглядит страница, если я оставлю вышеуказанную строку в коде.

Answer 1

есть две вещи, чтобы заботиться о:

1. ParseInt величина выбранной опции

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

2. Дайте h2 идентификатор (например, 'заголовок') и назначить значение с getElementById

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

Редактировать: для пояснения. Если вы getElementsByTagName, вы получите массив элементов. Для присвоения значения вам нужно выбрать один из массива, например. document.getElementByTagName('h2')[0] будет первым h2 на странице.

Answer 2

Необходимо указать parse значение выпадающего списка в integer, так как value является string по умолчанию.

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