Totale generale nel calcolatore di prodotti su JavaScript

Adesso facciamo in modo che sotto la tabella venga visualizzato il totale generale degli acquisti. Ci sono delle sfumature.

Se si riflette sulla situazione, diventa chiaro che il totale dovrebbe essere rettificato non solo all'aggiunta di un nuovo acquisto, ma anche alla cancellazione e alla modifica.

In tal caso proporrei di creare una funzione, chiamiamola recountTotal, che eseguirà un ricalcolo completo del totale. Cioè, scorrerà con un ciclo tutti gli acquisti e sommerà il contenuto della loro colonna cost.

Avere una tale funzione ci permetterà di chiamarla in qualsiasi punto in cui sono previste modifiche al totale generale. Certo, non è del tutto ottimale ricalcolare il totale generale ogni volta. Tuttavia, otterremo una semplificazione significativa del codice.

Utilizziamo la funzione prevista durante la creazione di un nuovo acquisto:

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, 'rimuovi', 'remove');
	
	table.appendChild(tr);
	recountTotal(); // ricalcoliamo il totale generale
});

Ecco la bozza della funzione descritta:

function recountTotal() {
	let costs = table.querySelectorAll('.cost');
	
	if (costs) {
		// troviamo la somma e la scriviamo in #total
	}
}

Implementate la funzione recountTotal che ho descritto.