Összes összeg a termékkalkulátorban JavaScriptben

Most tegyük úgy, hogy a tábla alatt az összes vásárlás összege jelenjen meg. Itt vannak árnyalatok.

Ha átgondoljuk a helyzetet, világossá válik, hogy az összeget nem csak akkor kell korrigálni, amikor új vásárlást adunk hozzá, hanem törlés és szerkesztés esetén is.

Ilyen esetben javasolnám, hogy készítsünk egy függvényt, nevezzük recountTotal-nak, amely az összes összeg teljes újraszámítását végzi. Vagyis végigmegy egy ciklussal az összes vásárláson és összegzi azok cost oszlopának tartalmát.

Egy ilyen függvénnyel meg tudjuk hívni azt bárhol, ahol az összes összeg változása várható. Természetesen kissé nem optimális minden alkalommal újraszámolni az összes összeget. Viszont jelentős kód egyszerűsítést kapunk.

Használjuk a tervezett függvényt egy új vásárlás létrehozásakor:

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, 'töröl', 'remove');
	
	table.appendChild(tr);
	recountTotal(); // újraszámoljuk az összes összeget
});

Itt van az ismertetett függvény vázlata:

function recountTotal() {
	let costs = table.querySelectorAll('.cost');
	
	if (costs) {
		// megkeressük az összeget és beírjuk a #total-ba
	}
}

Valósítsa meg az általam ismertetett recountTotal függvényt.