JavaScript-də məhsul kalkulyatorunda ümumi məbləğ

Gəlin indi cədvəlin altında alış-verişlərin ümumi məbləğinin göstərilməsini təmin edək. Burada bəzi nüanslar var.

Vəziyyəti düşünsək, aydın olar ki, məbləğ təkcə yeni alış-veriş əlavə edildikdə deyil, həm də silindikdə və redaktə edildikdə dəyişməlidir.

Mən belə bir halda müəyyən bir funksiya yaratmağı təklif edirəm, onu recountTotal adlandıraq, hansı ki ümumi məbləğin tam yenidən hesablanmasını yerinə yetirəcək. Yəni bütün alış-verişlər üzrə dövrə ilə keçəcək və onların cost sütunundakı məzmunu cəmləyəcək.

Belə bir funksiyaya malik olmaqla, biz onu ümumi məbləğdə hər hansı dəyişikliklərin nəzərdə tutulduğu istənilən yerdə çağıra bilərik. Əlbəttə, hər dəfə ümumi məbləği hesablamaq bir qədər optimal deyil. Ancaq bunun əvəzində biz kodu əhəmiyyətli dərəcədə sadələşdirəcəyik.

Yeni alış-veriş yaradarkən nəzərdə tutulan funksiyadan istifadə edək:

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(); // ümumi məbləği yenidən hesablayırıq
});

Budur təsvir edilən funksiyanın hazırlanması:

function recountTotal() {
	let costs = table.querySelectorAll('.cost');
	
	if (costs) {
		// məbləği tapırıq və onu #total-ə yazırıq
	}
}

Təsvir etdiyim recountTotal funksiyasını həyata keçirin.