Calculate the total cost of the products within the shopping cart and displaying it at the bottom rather than manual input

Question

I have made a checkout form that displays the cost of a product, the subtotal, GST cost, delivery cost, and total price. What id like to do is take the cost of each product whic

Answer 1

you can use querySelectorAll

for example:

// Get all the elements that have the `.price` class
const prices = document.querySelectorAll(".price");

Then you could loop over prices use array.reduce()

// convert the nodeList into an array and loop over it
let total = [...prices].reduce((acc, price) => {
    return acc + parseFloat(price.innerHTML);  
}, 0);

This would however require you to edit the HTML

From

$429.00 (GST Inc)

To something like -

$
429.00
 (GST Inc)

or you could use a regular expression on the price.innerHTML