<div class="item" data-cost="200"> <button class="btn_plus">+</button> <button class="btn_minus">-</button> <div class="amount"></div> </div> <div class="item" data-cost="500"> <button class="btn_plus">+</button> <button class="btn_minus">-</button> <div class="amount"></div> </div> <div class="summ"></div>

There is such a html structure. What kind of script is needed for the +/- buttons to display the product increment / decrement in <div class="amount"> , and the data-cost each element was summed up in <div class="summ"> .

    1 answer 1

    You can do this:

     Array.from(document.querySelectorAll('.btn_plus')).forEach(function(e) { e.addEventListener('click', function() { var amount = this.parentElement.getElementsByClassName('amount')[0]; var val = +amount.innerText; amount.innerText = val + 1; calculateTotalSum(); }); }); Array.from(document.querySelectorAll('.btn_minus')).forEach(function(e) { e.addEventListener('click', function() { var amount = this.parentElement.getElementsByClassName('amount')[0]; var val = +amount.innerText; amount.innerText = val == 0 ? 0 : val - 1; calculateTotalSum(); }); }); function calculateTotalSum() { var amounts = document.getElementsByClassName('amount'); var summ = document.getElementsByClassName('summ')[0]; var tSum = 0; Array.from(amounts).forEach(function(e) { var cost = +e.parentElement.getAttribute('data-cost'); var count = +e.innerText; tSum += cost * count; }); summ.innerText = tSum; }; 
     <div class="item" data-cost="200"> <button class="btn_plus">+</button> <button class="btn_minus">-</button> <div class="amount">0</div> </div> <div class="item" data-cost="500"> <button class="btn_plus">+</button> <button class="btn_minus">-</button> <div class="amount">0</div> </div> <div class="summ">0</div>