Somme totale dans le calculateur de produits en JavaScript

Faisons en sorte maintenant que le montant total des achats s'affiche sous le tableau. Il y a des nuances.

Si on y réfléchit, il devient clair que le total doit être ajusté non seulement lors de l'ajout d'un nouvel achat, mais aussi lors de la suppression et de la modification.

Je proposerais dans ce cas de créer une fonction, appelons-la recountTotal, qui effectuera un recalcul complet du total. C'est-à-dire qu'elle parcourra en boucle tous les achats et additionnera le contenu de leur colonne cost.

Avec une telle fonction, nous pourrons l'appeler à tout endroit où des modifications du total sont envisagées. Bien sûr, ce n'est pas tout à fait optimal de recalculer le total à chaque fois. Mais nous obtiendrons une simplification substantielle du code.

Utilisons la fonction envisagée lors de la création d'un nouvel achat :

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, 'supprimer', 'remove');
	
	table.appendChild(tr);
	recountTotal(); // recalculons le total
});

Voici l'ébauche de la fonction décrite :

function recountTotal() {
	let costs = table.querySelectorAll('.cost');
	
	if (costs) {
		// trouvons la somme et écrivons-la dans #total
	}
}

Implémentez la fonction recountTotal que j'ai décrite.