Summe der ausgewählten Elemente eines Dropdown-Menüs für Seiten

Question

Meine Seite hat eine Tabelle mit einer Reihe von Dropdown-Menüs in einer Spalte (die alle eine Reihe von Zahlen enthalten). Ich möchte jedes Mal eine Funktion ausführen der Werte wird geändert, das nimmt die Summe der Werte und zeigt das Ergebnis auf der Seite an. Ich glaube, dass meine Funktion (totalMarks) eine Sammlung aller meiner Dropdown-Menüs erhält, diese dann durchläuft, den Gesamtwert des ausgewählten Index addiert und dann die Gesamtmarkierungen innerhalb einiger h2-Tags anzeigt. Liegt mein Problem in der Aufzählung der Dropdown-Menüs oder woanders?

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

Wie die Seite aussehen soll, und tut, wenn ich die Zeile "document.getElementById (" marksline ") innerHTML- =. "Nicht enthalten Gesamt Marks:" + Gesamt;"

Wie die Seite aussieht, wenn ich die oben genannte Zeile im Code lassen.

Answer 1

gibt es zwei Dinge zu kümmern:

1. parseInt der Wert der ausgewählten Option

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

2. Geben Sie dem h2 eine ID (zB 'Überschrift') und zuweisen der Wert mit getElementById

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

Edit: zur Verdeutlichung. Wenn Sie getElementsByTagName erhalten Sie eine Reihe von Elementen. Um einen Wert zuzuweisen, müssen Sie einen aus dem Array auswählen, z. document.getElementByTagName('h2')[0] wäre der erste h2 auf der Seite.

Answer 2

Sie müssen parse Wert von Drop-Down in integer als value ein string standardmäßig ist.

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