Totalbelopp i en livsmedelskalkylator i JavaScript

Låt oss nu göra så att den totala summan av inköpen visas under tabellen. Det finns några nyanser här.

Om man tänker på situationen blir det tydligt att summan måste justeras inte bara när ett nytt köp läggs till, utan även vid borttagning och redigering.

Jag skulle i så fall föreslå att vi skapar en funktion, låt oss kalla den recountTotal, som kommer att utföra en fullständig omberäkning av summan. Den kommer att gå igenom alla inköp i en loop och summera innehållet i deras kolumn cost.

Med en sådan funktion kan vi anropa den var som helst där ändringar av den totala summan förväntas. Det är förstås inte helt optimalt att varje gång beräkna den totala summan. Å andra sidan får vi en betydande förenkling av koden.

Låt oss använda den föreslagna funktionen när ett nytt köp skapas:

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, 'ta bort', 'remove');
	
	table.appendChild(tr);
	recountTotal(); // beräkna den totala summan på nytt
});

Här är en förberedd version av den beskrivna funktionen:

function recountTotal() {
	let costs = table.querySelectorAll('.cost');
	
	if (costs) {
		// hitta summan och skriv den till #total
	}
}

Implementera funktionen recountTotal som jag beskrivit.