JavaScript Ürün Hesaplayıcısında Toplam Tutar

Şimdi tablonun altında alışverişlerin toplam tutarının görüntülenmesini sağlayalım. Burada incelikler var.

Durumu düşünürsek, toplam tutarın sadece yeni bir alışveriş eklendiğinde değil, aynı zamanda silme ve düzenleme işlemlerinde de güncellenmesi gerektiği anlaşılır.

Bu durumda ben, toplam tutarın tam bir yeniden hesaplamasını yapan, adına recountTotal diyeceğimiz bir fonksiyon yapmayı öneriyorum. Yani tüm alışverişlerin üzerinden döngüyle geçecek ve cost sütunlarındaki değerleri toplayacak.

Böyle bir fonksiyona sahip olarak, toplam tutarda herhangi bir değişiklik olmasının beklendiği her yerde onu çağırabiliriz. Tabii ki, her seferinde toplam tutarı hesaplamak biraz optimâl değil. Ancak kodda önemli bir basitleştirme elde ederiz.

Tasarladığımız fonksiyonu yeni bir alışveriş oluştururken kullanalım:

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, 'sil', 'remove');
	
	table.appendChild(tr);
	recountTotal(); // toplam tutarı yeniden hesapla
});

İşte tanımlanan fonksiyonun taslağı:

function recountTotal() {
	let costs = table.querySelectorAll('.cost');
	
	if (costs) {
		// toplamı bul ve #total içine yaz
	}
}

Tarafımdan tanımlanan recountTotal fonksiyonunu uygulayın.