JavaScript da Mahsulotlar Kalkulyatorida Umumiy Summa

Keling, endi jadval ostida xaridlar umumiy summasi chiqarilishini ta'minlaylik. Bu yerda nozikliklar mavjud.

Vaziyatni o'ylab ko'rsak, shu aniq bo'ladiki, summa nafaqat yangi xarid qo'shilganda, balki o'chirilganda va tahrirlanganda ham moslashishi kerak.

Men bunday holatda ma'lum bir funktsiyani yaratishni taklif qilardim, uni recountTotal deb ataymiz, bu umumiy summaning to'liq qayta hisobini bajaradi. Ya'ni u tsiklar orqali barcha xaridlar bo'ylab aylanadi va ularning cost ustunidagi qiymatlarni yig'adi.

Bunday funktsiyaga ega bo'lsak, biz uni umumiy summaning o'zgarishi kutilgan har qanday joyda chaqira olamiz. Albatta, har safar umumiy sumni hisoblash biroz optimal emas. Ammo biz kodni sezilarli darajada soddalashtirishga erishamiz.

Yangi xarid yaratilganda taklif qilingan funktsiyadan foydalanamiz:

javascriptadd.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, 'o‘chirish', 'remove');
  
  table.appendChild(tr);
  recountTotal(); // umumiy summani qayta hisoblaymiz
});

Mana tavsiflangan funktsiya uchun shablon:

javascriptfunction recountTotal() {
  let costs = table.querySelectorAll('.cost');
  
  if (costs) {
    // summani topamiz va uni #total ga yozamiz
  }
}