Solch eine Aufgabe tritt relativ häufig auf. Ich schlage folgende Lösung vor:
Die IDs durch Klassen ersetzen. Hat man jetzt z. B. den Plus-Button, kann man das dazugehörige Eingabefeld mit der Anzahl ermitteln, indem man das Elternelement ermittelt, in dem Fall das <td> und davon ausgehend über die Funktion querySelector mit der Klasse als Parameter das Eingabefeld.
Außerdem schlage ich vor, um mehrfachen Code zu vermeiden, Herauf- und Herunterzählen mit nur einer Funktion zu erledigen.
Ich habe davon eine Demo gemacht:
<table>
<tr id="zeile1">
<form name="Formular" action="">
<td><input type="text" id="Artikel" size="20"></td>
<td>
<input type="button" class="changeNr" value="-">
<input type="text" class="nr-person adult" data-factor="1" size="2" disabled="" value="1" />
<input type="button" class="changeNr" value="+">
</td>
<td>
<input type="button" class="changeNr" value="-">
<input type="text" class="nr-person child" data-factor="0.35" size="2" disabled="" value="1" />
<input type="button" class="changeNr" value="+">
</td>
<td>
<input type="text" class="per-item" disabled="disabled" value="23.95" size="5">
</td>
<td>
<input type="text" class="total" disabled="disabled" value="23.95" size="5">
</td>
<td>
<a href="javascript:blend_out('zeile1')"><input type="button" value="X" onclick="reset1()"></a>
</td>
</form>
</tr>
</table>
<script>
// Alle Buttons zum Aendern der Anzahl ermitteln
const changeBtns = document.querySelectorAll('.changeNr');
// Fuer jeden Button einen Eventlistener registrieren
for (let i = 0; i < changeBtns.length; i++) {
const theBtn = changeBtns[i]; // der aktuelle Button
theBtn.addEventListener('click', function () {
// this ist der aktuelle Button
let val = this.value; // der aktuelle Wert '+' oder '-'
// Das Eingabefeld mit der Anzahl:
// this.parentNode ist das Elternelement (das <td>)
// let inputNr = this.parentNode.childNodes[1];
const inputNr = this.parentNode.querySelector('.nr-person');
let nr = inputNr.value; // die aktuelle Anzahl
// entsprechend dem Wert '+' oder '-' die Anzahl ändern
if (val == '+') {
nr++;
} else {
nr--;
}
// den neuen Wert in das Eingabefeld eintragen
inputNr.value = nr;
// die Funktion summieren berechnet jetzt den Preis
// wir uebergeben ihr das Elternelement unter dem
// alle Elemente versammelt sind
summieren(this.parentNode.parentNode);
});
}
function summieren(ele) {
// Einzelpreis ermitteln
const perItemPrice = ele.querySelector('.per-item').value;
let totalPrice = 0;
// die Eingabefelder mit jeweils der Anzahl der Personen ermitteln
const nrInputs = ele.querySelectorAll('.nr-person');
for (let i = 0; i < nrInputs.length; i++) {
const theNrInput = nrInputs[i];
const nr = theNrInput.value; // die aktuelle Anzahl
const factor = theNrInput.getAttribute('data-factor'); // der aktuelle Faktor
totalPrice += perItemPrice * nr * factor;
}
console.log(totalPrice);
}
</script>
Alles anzeigen
Ich hoffe, durch die Kommentare ist es verständlich.
