ยอดรวมทั้งหมดในเครื่องคิดเลขสินค้าบน JavaScript

ตอนนี้เรามาทำให้ตารางแสดงยอดรวมของการซื้อทั้งหมดด้านล่างกัน มีข้อพึงระวังบางประการ

หากลองพิจารณาสถานการณ์ดีๆ จะเห็นได้ว่ายอดรวมควรจะถูกปรับไม่เพียงแต่เมื่อเพิ่มรายการซื้อใหม่เท่านั้น แต่ยังต้องปรับเมื่อลบหรือแก้ไขรายการด้วย

ในกรณีนี้ผมขอเสนอให้สร้างฟังก์ชันขึ้นมาฟังก์ชันหนึ่ง ตั้งชื่อว่า recountTotal ซึ่งจะทำหน้าที่คำนวณยอดรวมทั้งหมดใหม่ทั้งหมด นั่นคือจะวนลูปผ่านรายการซื้อทั้งหมดและรวมค่าของคอลัมน์ cost

เมื่อมีฟังก์ชันดังกล่าวแล้ว เราจะสามารถเรียกใช้มันได้ในทุกจุดที่คาดว่ายอดรวมจะมีการเปลี่ยนแปลง แน่นอนว่าการคำนวณยอดรวมใหม่ทุกครั้งอาจจะไม่ใช่วิธีที่ประสิทธิภาพที่สุด แต่เราจะได้โค้ดที่เรียบง่ายขึ้นอย่างมาก

ลองใช้ฟังก์ชันที่ว่ากันเมื่อสร้างรายการซื้อใหม่:

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, 'ลบ', 'remove');
  
  table.appendChild(tr);
  recountTotal(); // คำนวณยอดรวมใหม่
});

นี่คือโครงร่างของฟังก์ชันที่อธิบายไว้:

javascriptfunction recountTotal() {
  let costs = table.querySelectorAll('.cost');
  
  if (costs) {
    // หาผลรวมและเขียนลงใน #total
  }
}