Totale som in voedselcalculator op JavaScript

Laten we nu ervoor zorgen dat onder de tabel het totale aankoopbedrag wordt weergegeven. Hier zijn er nuances.

Als je de situatie overdenkt, wordt het duidelijk dat het bedrag niet alleen moet worden aangepast bij het toevoegen van een nieuwe aankoop, maar ook bij het verwijderen en bewerken.

Ik zou in dat geval voorstellen om een bepaalde functie te maken, laten we hem recountTotal noemen, die een volledige herberekening van het totaalbedrag zal uitvoeren. Dat wil zeggen, hij zal in een lus door alle aankopen gaan en de inhoud van hun kolom cost optellen.

Met zo'n functie kunnen we hem aanroepen op elke plaats waar wijzigingen in het totale bedrag worden verwacht. Het is natuurlijk niet erg optimaal om elke keer het totale bedrag te berekenen. Maar we krijgen een aanzienlijke vereenvoudiging van de code.

Laten we de beoogde functie gebruiken bij het maken van een nieuwe aankoop:

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, 'verwijderen', 'remove');
	
	table.appendChild(tr);
	recountTotal(); // herbereken het totale bedrag
});

Hier is de basis voor de beschreven functie:

function recountTotal() {
	let costs = table.querySelectorAll('.cost');
	
	if (costs) {
		// vind de som en schrijf deze in #total
	}
}

Implementeer de door mij beschreven functie recountTotal.