Celková částka v kalkulačce produktů na JavaScriptu

Pojďme nyní zařídit, aby pod tabulkou byla zobrazena celková částka nákupů. Jsou zde nuance.

Pokud situaci promyslíte, je jasné, že částka by se měla upravovat nejen při přidání nového nákupu, ale také při odstranění a při editaci.

Navrhl bych v takovém případě vytvořit určitou funkci, nazveme ji recountTotal, která bude provádět úplný přepočet částky. To znamená, že bude procházet cyklem všechny nákupy a sčítat obsah jejich sloupce cost.

S takovou funkcí ji budeme moci volat na jakémkoli místě, kde se předpokládají nějaké změny celkové částky. Samozřejmě, je trochu neoptimální pokaždé přepočítávat celkovou částku. Na druhou stranu získáme podstatné zjednodušení kódu.

Použijme předpokládanou funkci při vytváření nového nákupu:

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, 'odstranit', 'remove');
	
	table.appendChild(tr);
	recountTotal(); // přepočteme celkovou částku
});

Zde je připravená šablona popsané funkce:

function recountTotal() {
	let costs = table.querySelectorAll('.cost');
	
	if (costs) {
		// najdeme součet a zapíšeme jej do #total
	}
}

Implementujte funkci recountTotal, kterou jsem popsal.