CODEWITHSUNDEEP
javascripthtmlarrays
Alin99
Alin99

Reputation: 19

How to change text content of total when adding values from another column?

So I am trying to make a checkout page, where when i click a the plus button, price remains fixed, but it adds to the total everytime i click and quantity goes up by 1. I could do this by writing a bunch of code, but I have multiple divs with the same class "price", "plus-btn", "total-item" that I got into JS with querySelectorAll.

I have 7 columns like this, all with different prices :

let plusBtn = document.querySelectorAll(".plus-btn");
let minusBtn = document.querySelector(".minus-btn");

let priceItem = document.querySelectorAll(".price");
let totalItem = document.querySelectorAll(".total-item");

let price = priceItem;
let total = [];
let stop = 1;

// Each individual button will start addValue() function when button is clicked

plusBtn.forEach((plusBtn) => {
  addEventListener("click", addValue);
});

function addValue() {
  for (let i = 0; priceItem.length; i++) {
    if (stop === 1) {
      console.log("Plus button was clicked");
    }
    break;
  }
  for (let i = 0; i < priceItem.length; i++) {
    total.push(priceItem[i].textContent);
  }
  return priceItem;
}
<div class="row text-center third-product-row my-2">
  <div class="col">
    <p>3</p>
  </div>
  <div class="col">
    <p>Smart Speaker</p>
  </div>
  <div class="col">
    <p>15</p>
  </div>
  <div class="col price">
    <p>30</p>
  </div>
  <div class="col">
    <p>0</p>
  </div>
  <div class="col total-item">
    <p>$ 0.00</p>
  </div>

  <div class="col">
    <button class="plus-btn"><i class="fa-solid fa-plus"></i>+</button>
    <button class="minus-btn"><i class="fa-solid fa-minus">-</i></button>
  </div>
</div>

Upvotes: 0

Views: 56

Answers (1)

user2495207
user2495207

Reputation: 861

Every row has a plus button, take that as a reference to reach to the other values such as price, total, etc; e.target makes reference to the button clicked and e.target.parentElement.previousElementSibling to <div class="col total-item"<p>$ 0.00</p></div>

    let plusBtn = document.querySelectorAll(".plus-btn");

    plusBtn.forEach((plusBtn) => {
      plusBtn.addEventListener("click", addValue);
    });

    function addValue(e) {
      /*console.log(e.target);
      console.log(e.target.parentElement);
      console.log(e.target.parentElement.previousElementSibling);*/
      let _total = e.target.parentElement.previousElementSibling;
      let _quantity = _total.previousElementSibling;
      let _price = _quantity.previousElementSibling;

      _total.firstElementChild.textContent =
        "$ " + (parseFloat(_total.firstElementChild.textContent.slice(2)) + parseFloat(_price.textContent));
      _quantity.firstElementChild.textContent = parseInt(_quantity.textContent) + 1;
    }
<div class="row text-center third-product-row my-2">
  <div class="col">
    <p>3</p>
  </div>
  <div class="col">
    <p>Smart Speaker</p>
  </div>
  <div class="col">
    <p>15</p>
  </div>
  <div class="col price">
    <p>30</p>
  </div>
  <div class="col">
    <p>0</p>
  </div>
  <div class="col total-item">
    <p>$ 0.00</p>
  </div>

  <div class="col">
    <button class="plus-btn"><i class="fa-solid fa-plus"></i>+</button>
    <button class="minus-btn"><i class="fa-solid fa-minus">-</i></button>
  </div>
      <div class="row text-center third-product-row my-2">
      <div class="col">
        <p>3</p>
      </div>
      <div class="col">
        <p>Smart Speaker</p>
      </div>
      <div class="col">
        <p>15</p>
      </div>
      <div class="col price">
        <p>35</p>
      </div>
      <div class="col quantity">
        <p>0</p>
      </div>
      <div class="col total-item">
        <p>$ 0.00</p>
      </div>

      <div class="col">
        <button class="plus-btn"><i class="fa-solid fa-plus"></i>+</button>
        <button class="minus-btn"><i class="fa-solid fa-minus">-</i></button>
      </div>
    </div>
</div>

Upvotes: 1

Related Questions