Problem mit dem Erhalten einer Schlüsselfunktion, um die Summe der Eingabefeldwerte mit Hilfe von Javascript zu erhalten

Question

Ich arbeite an einem persönlichen Projekt und bin auf ein Problem gestoßen, das ich nicht lösen konnte.

Hier ist eine Funktion, die neuen Tabellenzeilen in eine Tabelle erzeugt (mit der ID von „Table“), wenn eine Schaltfläche geklickt wird:

function addNewRow(){ 
    var tableEl = document.getElementById("tableData"); 
    var newLine = '<tr class="newEntry">'; 
    var classArray = ["classA", "classB", "classC", "classD"]; 

    for (var i = 0; i < classArray.length; i++){ 
    newLine += '<td><input class="' + classArray[i] + '"></td>'; 
    } 
    newLine += '</tr>'; 
    tableEl.insertAdjacentHTML("beforeend", newLine); 
} 

document.getElementById("addRow").addEventListener("click", addNewRow, false); 
//the element with id="addRow" is a button 

ich den Code für die oben genannte Funktion aus Gründen vereinfacht haben der Lesbarkeit, da es nicht im Mittelpunkt des Problems steht. Wenn Sie auf die Schaltfläche klicken, wird eine neue Zeile erfolgreich hinzugefügt.

Der problematische Teil beinhaltet eine andere Funktion, die die Summe der jeweiligen Klassen jeder Zeile nimmt und sie in einem div anzeigt.

Ziel ist es, die Summe der Werte aller Eingabefelder mit übereinstimmenden Klassennamen zu erhalten. Angenommen, ich verwende die Funktion addNewRow, um sechs Zeilen zu erhalten. Dann möchte ich, dass das div die Summe der Werte aller Eingabefelder mit dem Klassennamen "classA" anzeigt. Die Zahl in diesem div sollte die Summe dieser sechs Werte sein, die aktualisiert wird, wenn ich die Werte eintippe oder die vorhandenen Werte in einem der Eingabefelder mit dem Klassennamen "ClassA" ändere.

function sumValues(divId, inputClass){ 
    var sumVal = document.getElementsByClassName(inputClass); 
    var addedUp = 0; 
    for (var j = 0; j < sumVal.length; j++){ 
    addedUp += Number(sumVal[j].value); 
    } 
    document.getElementById(divId).innerHTML = addedUp; 
} 

Hier sind ein paar (von mehreren) Versuche schlugen fehl:

document.input.addEventListener("keyup", sumValues("genericDivId", "classA"), false); 

document.getElementsByClassName("classA").onkeyup = function(){sumValues("genericDivId", "classA");} 

Leider, nachdem die Bahn für eine Lösung zum Scheuern und andernfalls einen zu finden, habe ich nur noch ein Ereignis-Listener auf eine Schaltfläche Wenn Sie darauf klicken, wird das div aktualisiert, um die Summe der Werte anzuzeigen. Außerdem musste die Funktion sumValues ​​geändert werden, um Werte aus einem Array zu übernehmen, anstatt Argumente zu akzeptieren.

Meine Frage ist: Wie kann ich den Code ändern, so dass der Summenwert aktualisiert wird, wenn ich neue Werte eintippe oder vorhandene Werte mit reinem Javascript (Vanille JS) ändere?

Answer 1

Sie sind sehr nahe, document.getElementsByClassName() gibt ein Array von DOM-Objekten zurück, Sie müssen die onkeyup-Funktion für jedes Element durch Schleifen durch das Array festlegen.

var classA = document.getElementsByClassName('classA'); // this is an array 
classA.forEach(function(elem){ // loop through the array 
    elem.onkeyup = function(){ // elem is a single element 
    sumValues("genericDivId", "classA"); 
    } 
} 

Hoffentlich behebt das Problem

Answer 2

Vielleicht unter dem Beispiel nicht gleiche mit Ihrer Situation ist, aber Sie werden die Logik, leicht. Wie auch immer, zögern Sie nicht, nach mehr Führer zu fragen.

document.getElementById("row_adder").addEventListener("click", function() { 
 
\t \t var t = document.getElementById("my_table"); 
 
\t \t var r = t.insertRow(-1); // adds rows to bottom - change it to 0 for top 
 
\t \t var c = r.insertCell(0); 
 
\t \t c.innerHTML = "<input class='not_important_with_that_way' type='number' value='0' onchange='calculate_sum()'></input>"; \t \t 
 
\t }); 
 

 
function calculate_sum() { 
 
\t var sum = ([].slice.call(document.querySelectorAll("[type=number]"))).map(e=>parseFloat(e.value)).reduce((a, b) => a+b); 
 
\t document.getElementById("sum").innerHTML = sum; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
</head> 
 
<body> 
 
<div> 
 
<p> 
 
    <strong>Sum</strong>:<span id="sum">0</span> 
 
</p> \t 
 
</div> 
 
<button id="row_adder"> 
 
\t Click me 
 
</button> 
 
<table id="my_table"> 
 
\t 
 
</table> 
 

 

 

 
</body> 
 
</html>