Suma total en calculadora de productos en JavaScript

Ahora hagamos que debajo de la tabla se muestre el total de la compra. Aquí hay matices.

Si pensamos en la situación, quedará claro que el total debe ajustarse no solo al agregar una nueva compra, sino también al eliminar y al editar.

En tal caso, yo propondría hacer una función, llamémosla recountTotal, que realizará un recálculo completo del total. Es decir, recorrerá en un ciclo todas las compras y sumará el contenido de su columna cost.

Teniendo tal función, podremos llamarla en cualquier lugar donde se supongan algunos cambios en el total. Por supuesto, es un poco no óptimo calcular el total cada vez. Pero obtendremos una simplificación sustancial del código.

Usemos la función supuesta al crear una nueva compra:

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, 'eliminar', 'remove');
	
	table.appendChild(tr);
	recountTotal(); // recalculamos el total
});

Aquí está el borrador de la función descrita:

function recountTotal() {
	let costs = table.querySelectorAll('.cost');
	
	if (costs) {
		// encontramos la suma y la escribimos en #total
	}
}

Implemente la función recountTotal descrita por mí.