"Furthermore if you have the price and quantity input elements here price.addEventListener("input", updateTotal); quantity.addEventListener("input", updateTotal);"
"Why are you then searching the DOM for them again every time an input is made? function updateTotal() { const price = parseFloat(document.getElementById("price").value) || 0; const qty = parseFloat(document.getElementById("quantity").value) || 0; ..."
A DOM lookup is being performed inside the updateTotal function even though event listeners already hold references to the price and quantity inputs. The event listeners are attached via price.addEventListener("input", updateTotal) and quantity.addEventListener("input", updateTotal). The updateTotal function then calls document.getElementById("price") and document.getElementById("quantity") and parses their values with parseFloat, defaulting to 0. Re-querying the DOM on every input is unnecessary and less efficient than using the existing element references. Cache the elements and use those cached references inside the handler.
Read at SitePoint Forums | Web Development & Design Community
Unable to calculate read time
Collection
[
|
...
]