Totalbeløb i fødevareberegner på JavaScript

Lad os nu gøre det sådan, at der under tabellen udskrives et totalbeløb for indkøbene. Der er nuancer her.

Hvis man tænker situationen igennem, bliver det klart, at beløbet skal justeres ikke kun når der tilføjes et nyt køb, men også ved sletning og redigering.

Jeg vil i sådant et tilfælde foreslå at lave en vis funktion, lad os kalde den recountTotal, som vil udføre en fuldstændig genberegning af beløbet. Det vil sige, den vil løbe i et loop gennem alle køb og summere indholdet i deres kolonne cost.

Med en sådan funktion vil vi være i stand til at kalde den hvor som helst, hvor der forventes ændringer af det samlede beløb. Det er selvfølgelig ikke helt optimalt at beregne det samlede beløb hver gang. Men på den anden side får vi en betydelig forenkling af koden.

Vi bruger den foreslåede funktion ved oprettelse af et nyt køb:

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, 'slet', 'remove');
	
	table.appendChild(tr);
	recountTotal(); // genberegner det samlede beløb
});

Her er skelettet for den beskrevne funktion:

function recountTotal() {
	let costs = table.querySelectorAll('.cost');
	
	if (costs) {
		// find summen og skriv den til #total
	}
}

Implementer den funktion recountTotal, som jeg har beskrevet.