जावास्क्रिप्ट में उत्पाद कैलकुलेटर में कुल योग

चलिए अब ऐसा करते हैं कि तालिका के नीचे खरीदारी की कुल राशि दिखाई दे। यहाँ कुछ बारीकियाँ हैं।

यदि स्थिति पर गौर करें, तो यह स्पष्ट हो जाएगा, कि राशि को न केवल नई खरीदारी जोड़ने पर समायोजित करना चाहिए, बल्कि हटाने और संपादित करने पर भी।

मैं ऐसे मामले में एक फ़ंक्शन बनाने का प्रस्ताव करूंगा, आइए इसे 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 में लिखें
  }
}