Je travaille sur un projet personnel et j'ai rencontré un problème que je n'ai pas réussi à résoudre.Problème lié à l'obtention d'une fonction de touche pour obtenir la somme des valeurs de champs de saisie en utilisant JavaScript.
est ici une fonction qui génère de nouvelles lignes de table dans une table (avec id « TableData ») quand un bouton est cliqué:
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
J'ai simplifié le code de la fonction ci-dessus pour l'amour de la lisibilité car ce n'est pas l'objet du problème. Lorsque le bouton est cliqué, une nouvelle ligne est ajoutée avec succès.
La partie problématique implique une autre fonction qui prend la somme des classes respectives de chaque rangée et les affiche dans une div.
L'objectif est d'obtenir la somme des valeurs de tous les champs de saisie avec les noms de classe correspondants. Par exemple, disons que j'utilise la fonction addNewRow pour obtenir six lignes. Ensuite, je veux que la div montre la somme des valeurs de tous les champs de saisie avec le nom de classe "classA"; le nombre dans cette div doit être la somme de ces six valeurs, qui est mise à jour lorsque je tape dans les valeurs ou change les valeurs existantes dans l'un des champs d'entrée avec le nom de classe "ClassA".
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;
}
Voici quelques (de plusieurs) tentatives ratées:
document.input.addEventListener("keyup", sumValues("genericDivId", "classA"), false);
document.getElementsByClassName("classA").onkeyup = function(){sumValues("genericDivId", "classA");}
Malheureusement, après avoir écumé le web pour trouver une solution et de ne pas en trouver un, je viens d'ajouter un écouteur d'événement à un bouton que, lorsqu'on clique dessus, le div est mis à jour pour afficher la somme des valeurs. A également dû modifier la fonction sumValues pour prendre des valeurs d'un tableau plutôt que d'accepter des arguments.
Ma question est: Comment puis-je modifier le code afin que les mises à jour de la valeur de la somme que je tape dans les nouvelles valeurs ou modifier les valeurs existantes en utilisant pur Javascript (JS vanille)?