Entonces, estoy tratando de hacer una página de pago, donde cuando hago clic en el botón más, el precio permanece fijo, pero se suma al total cada vez que hago clic y la cantidad aumenta en 1. Podría hacer esto escribiendo un montón de código, pero tengo varios divs con la misma clase "price", "plus-btn", "total-item" que ingresé a JS con querySelectorAll.
Tengo 7 columnas como esta, todas con precios diferentes:
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>Cada fila tiene un botón plus , tómelo como referencia para llegar a los otros valores como precio, total, etc.; e.target hace referencia al button en el que se hizo clic y e.target.parentElement.previousElementSibling a <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>