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

<div class='price'>$429.00 (GST Inc)</div>

To something like -

<div><span>$</span><div class='price'>429.00</div> <span>(GST Inc)</span></div>

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

Answer 2

You do NOT need an ID since IDs need to be unique.

I do not have your delivery on the page so here is the total

Note: You HTML is quite invalid. You cannot have divs in spans. Also I would have the style sheet external and placed in the beginning of the head

const prices = [...document.querySelectorAll(".order-info .price")]
  .map(price => +price.textContent.replace(/[^\d|.]/g, "")) // get rid of text and $

const sum = prices.length > 0 ? prices.reduce((a, b) => a + b) : 0; // sum the array of prices - if none, then 0
console.log(sum.toFixed(2)); // sum of prices

const costs = [...document.querySelectorAll(".cost_sum div")];
const total = costs.length > 0 ? costs.reduce((acc, cost) => {
  acc += +cost.textContent.replace(/[^\d|.]/g, "");
  return acc;
}, 0) : 0;
console.log(total.toFixed(2))

body {
  background-color: #424242;
}

.icon-container {
  text-align: center;
}

.fa,
.fab {
  font-size: 3.125em;
}

.fa-heart {
  color: #ffffd !important;
}

.fa-cc-apple-pay {
  background: -webkit-linear-gradient(45deg, rgb(119, 119, 119), rgb(255, 255, 255));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fa-cc-mastercard {
  background: -webkit-linear-gradient(0deg, #ffef00, #ff6f00, #ff0000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fa-cc-visa {
  background: -webkit-linear-gradient(90deg, rgb(255, 255, 0), rgb(255, 255, 255), rgb(35, 38, 250));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fa-cc-paypal {
  background: -webkit-linear-gradient(45deg, rgb(0, 4, 255), rgb(0, 225, 255));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fa-cc-amazon-pay {
  background: -webkit-linear-gradient(45deg, rgb(255, 138, 4), rgb(255, 174, 0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fa-google-pay {
  background: -webkit-linear-gradient(0deg, rgb(255, 0, 0), rgb(241, 147, 40), rgb(5, 206, 22), rgb(0, 174, 255));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.order-info-content .fa-shopping-cart {
  color: #212121;
}


/* Main body of checkout section */

.checkout-tabs {
  height: 59em;
  width: 75.000em;
  background: #fff;
  display: flex;
  border-radius: 2.063em;
}

@media only screen and (max-width: 700px) {
  .checkout-tabs {
    height: 62em;
  }
}


/* 
     ========================================================================================================                                                   
                                             Payment Form                                                              
     ========================================================================================================
      */

.payment-form h2 {
  margin-bottom: 0em;
  margin-top: 1.563em;
  text-align: center;
  font-weight: 200;
  font-size: 1.2em;
}

.order-info-content h2 {
  margin-bottom: 0em;
  text-align: center;
  font-weight: 500;
  font-size: 1.5em;
  color: #212121;
}

.payment-form label {
  margin-bottom: 0.625em;
  display: block;
  color: #ffffd;
}

.payment-form {
  justify-content: center;
  align-items: center;
  display: flex;
}

.order-table .product-name {
  font-weight: 500;
}

.order-table .description {
  font-weight: 200;
  font-size: 0.750em;
  font-size: .8em;
  list-style-type: none;
}

.half-input-table {
  border-collapse: collapse;
  width: 100%;
}

.half-input-table td:first-of-type {
  border-right: 0.625em solid #212121;
  width: 50%;
}

.order-info {
  height: 100%;
  width: 50%;
  padding-left: 1.563em;
  padding-right: 1.563em;
  position: relative;
}

.price {
  bottom: 0em;
  position: absolute;
  right: 0em;
  color: #21212180;
}

.order-table td:first-of-type {
  width: 25%;
}

.order-table {
  position: relative;
}

.devider {
  height: 0.063em;
  width: 100%;
  margin-top: 0.625em;
  margin-bottom: 0.625em;
  background: #21212185;
}

.cost_sum {
  float: right;
  text-align: right;
}

.total-field {
  width: 50%;
  margin-bottom: 20px;
}

.quantity {
  width: 10%;
  margin-left: 5px;
  float: right;
}

.price-right {
  float: right;
}

.checkout-button {
  border: solid;
  border-color: rgba(221, 221, 221, 0.281);
  background: rgb(53, 53, 53);
  padding: 0.7em;
  border-radius: 1.250em;
  font-size: 1.250em;
  color: rgb(255, 255, 255);
  cursor: pointer;
  width: 100%;
}

.checkout-button:hover {
  opacity: 95%;
}

.total-font {
  line-height: 1.2em;
  font-size: 1.000em;
  font-size: 1em;
  font-weight: 400;
}

.input-field {
  background: #ffffd;
  margin-bottom: 0.625em;
  margin-top: 0.188em;
  line-height: 1.5em;
  font-size: 1.250em;
  font-size: 1.3em;
  border: none;
  border-radius: 0.313em;
  padding: 0.313em 0.625em 0.313em 0.625em;
  color: #fff;
  box-sizing: border-box;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.details-field {
  background: #212121;
  height: 100%;
  width: 50%;
  color: #eee;
  justify-content: center;
  font-size: 0.875em;
  font-size: .9em;
  box-sizing: border-box;
  padding-left: 1.563em;
  padding-right: 1.563em;
  border-radius: 1.875em;
  border-style: solid;
  border-color: white;
}

.details-inputs {
  margin-top: 1.563em;
  -webkit-flex-flow: column;
  -ms-flex-flow: column;
  flex-flow: column;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.details-inputs h3 {
  text-align: center;
  padding: 0em;
  margin-top: 0em;
  font-size: large;
}

.item-btn {
  color: red;
  background-color: transparent;
  border-style: none;
  float: right;
}

.item-btn:hover {
  cursor: pointer;
}

.checkout-form-1 {
  height: 300px;
  width: 400px;
  margin: 20px auto;
  border: 2px solid black;
  text-align: center;
  background-color: white;
}

<head>
  <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<main>
  <div class='payment-form'>
    <div class='checkout-tabs'>

      <div class='order-info'>
        <div class='order-info-content'>
          <h2>Cart <i class="fa fa-shopping-cart"></i></h2>
          <div class='devider'></div>
          <table class='order-table' id="checkout-itm-1">

            <tbody>
              <tr>
                <td><img src='https://aoc-pim.s3.amazonaws.com/USA%20content/g2/CQ27G2/CQ27G2_F.png' width="100%">
                </td>
                <td>
                  <br>
                  <span class='product-name'>AOC C27G2</span>
                  <button class="item-btn" onclick="removeItem1()">X</button>
                  <br>27" Full HD Curved Monitor<br>
                  <li class='product description'>Resolution: 1920x1080</li>
                  <li class='product description'>Refresh Rate: 165hz</li>
                  <li class='product description'>Response Time: 1 ms</li>

                </td>

              </tr>
              <tr>
                <td>
                  <div class='price'>$429.00 (GST Inc)</div>
                </td>
              </tr>
            </tbody>

          </table>
          <div class='devider' id="dev1"></div>
          <table class='order-table' id="checkout-itm-2">
            <tbody>
              <tr>
                <td><img src='https://www.computerlounge.co.nz/data/media/images/catalogue/Products2/Peripherals/Mice/Logitech/22752_1.jpg?maxheight=950&maxwidth=600&quality=100&404=default.jpg' width="100%">
                </td>
                <td>
                  <br> <span class='product-name'>Logitech G402 Hyperion Fury</span>
                  <button class="item-btn" onclick="removeItem2()">X</button>
                  <br>Gaming Mouse<br>
                  <li class='product description'>Movement Detection: Optical</li>
                  <li class='product description'>Programmable Buttons: 8</li>
                  <li class='product description'>Hand Orientation: Right Hand</li>
                  <li class='product description'>Maximum DPI: 4,000</li>

                </td>
              </tr>
              <tr>
                <td>
                  <div class='price'>$94.89 (GST Inc)</div>
                </td>
              </tr>
            </tbody>
          </table>
          <div class='devider' id="dev2"></div>
          <table class='order-table' id="checkout-itm-3">
            <tbody>
              <tr>
                <td><img src='https://www.pbtech.co.nz/imgprod/H/S/HSTLOG4443629__1.jpg?h=1434805038' width="90%">
                </td>
                <td>
                  <br> <span class='product-name'>Logitech G332</span>
                  <button class="item-btn" onclick="removeItem3()">X</button>
                  <br>Stereo Gaming Headset<br>
                  <li class='product description'>Sound Mode: Stereo</li>
                  <li class='product description'>Microphone: Yes</li>
                  <li class='product description'>Interface: 3.5mm</li>
                  <li class='product description'>Colour: Black</li>

                </td>
              </tr>
              <tr>
                <td>
                  <div class='price'>$133.00 (GST Inc)</div>
                </td>
              </tr>
            </tbody>
          </table>

          <div class='devider' id="dev3"></div>
          <table class='order-table' id="checkout-itm-4">
            <tbody>
              <tr>
                <td>
                  <img src='https://www.pbtech.co.nz/imgprod/W/K/WKSGGPC50042__10.jpg' width="80%">
                </td>
                <td>
                  <br> <span class='product '>GGPC Legend</span>
                  <button class="item-btn" onclick="removeItem4()">X</button>
                  <br>RTX 2070 SUPER Gaming PC<br>
                  <li class='product description'>CPU: AMD Ryzen 7</li>
                  <li class='product description'>GPU: Nvidia RTX 2070 Super</li>
                  <li class='product description'>Memory: 16GB</li>

                </td>

              </tr>
              <tr>

                <td>
                  <div class='price'>$2,413.85 (GST Inc)</div>
                </td>
              </tr>
            </tbody>
          </table>

          <div class='devider '></div>

          <div class="cost-sum-headers">

            <div style='float:left; '>
              <div class='total-font'>Subtotal</div>
              <div class='total-font '>GST</div>
              <div class='total-font '>Delivery</div>
              TOTAL
            </div>
            <div class="cost_sum">
              <div class='total-font '>$2,753.35</div>
              <div class='total-font '>$398.16</div>
              <div class='total-font '>$26.97</div>
              <div class="total-font">$3,172.11</div>
            </div>
            <button class='checkout-button'>Checkout</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>