0
<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>

Есть такая html структура. Какой нужен скрипт, чтобы кнопки +/- соответственно выводили инкремент/декремент товара в <div class="amount">, а data-cost каждого элемента суммировалась в <div class="summ">.

1 ответ 1

2

Можно сделать так :

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.