Gesamtsumme im Produktrechner auf JavaScript

Lassen Sie uns nun erreichen, dass unter der Tabelle die Gesamtsumme der Einkäufe ausgegeben wird. Hier gibt es Nuancen.

Wenn man die Situation durchdenkt, wird klar, dass die Summe nicht nur beim Hinzufügen eines neuen Einkaufs angepasst werden muss, sondern auch beim Löschen und beim Bearbeiten.

Ich würde in einem solchen Fall vorschlagen, eine bestimmte Funktion zu erstellen, nennen wir sie recountTotal, die eine vollständige Neuberechnung der Summe durchführt. Das heißt, sie wird in einer Schleife alle Einkäufe durchgehen und den Inhalt ihrer Spalte cost summieren.

Mit einer solchen Funktion können wir sie an jeder Stelle aufrufen, wo Änderungen an der Gesamtsumme zu erwarten sind. Zwar ist es nicht ganz optimal, jedes Mal die Gesamtsumme neu zu berechnen. Dafür erhalten wir aber eine wesentliche Vereinfachung des Codes.

Verwenden wir die vorgesehene Funktion beim Erstellen eines neuen Einkaufs:

add.addEventListener('click', function() {
	let tr = document.createElement('tr');
	
	createCell(tr, name.value, 'name');
	createCell(tr, price.value, 'price');
	createCell(tr, amount.value, 'amount');
	createCell(tr, price.value * amount.value, 'cost');
	createCell(tr, 'удалить', 'remove');
	
	table.appendChild(tr);
	recountTotal(); // Gesamtsumme neu berechnen
});

Hier ist der Rahmen für die beschriebene Funktion:

function recountTotal() {
	let costs = table.querySelectorAll('.cost');
	
	if (costs) {
		// Summe finden und in #total schreiben
	}
}

Implementieren Sie die von mir beschriebene Funktion recountTotal.