Totalbeløp i en matvarekalkulator på JavaScript

La oss nå gjøre det slik at totalbeløpet for handlekurven vises under tabellen. Det er noen nyanser her.

Hvis du tenker på situasjonen, vil det bli klart at beløpet må justeres ikke bare ved tilføyelse av et nytt kjøp, men også ved sletting og redigering.

Jeg vil i så foreslå å lage en funksjon, la oss kalle den recountTotal, som vil utføre en fullstendig omberegning av totalen. Den vil gå gjennom alle kjøpene i en løkke og summere innholdet i kolonnen cost.

Med en slik funksjon kan vi kalle den hvor som helst det er forventet endringer i totalbeløpet. Selvfølgelig er det ikke helt optimalt å beregne totalen på nytt hver gang. Men vi får en betydelig forenkling av koden.

La oss bruke den foreslåtte funksjonen når vi oppretter et nytt kjøp:

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, 'slett', 'remove');
	
	table.appendChild(tr);
	recountTotal(); // beregner totalbeløpet på nytt
});

Her er skjelettet for den beskrevne funksjonen:

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

Implementer funksjonen recountTotal som jeg har beskrevet.