Как сделать, чтобы при клике на плюс или минус брать значение и в отдельный блок добавлять или отнимать это значение

Question

На странице есть несколько одинаковый карточек, в каждой карточке есть цена, кнопка плюс и минус, а так же итоговая стоимость. Нужно чтобы при нажатии на + или - брать значение с карточки и вносить в итоговую стоимость (ниже 0 нельзя), и для каждой карточки отдельно (Не скидывал сразу сюда мои попытки на js, ибо это полная фигня выходила)

const price = document.querySelectorAll('.price'),
      minus = document.querySelectorAll('.minus'),
      plus = document.querySelectorAll('.plus'),
      totalPrice = document.querySelectorAll('.total_price');


plus.forEach(item => {
    item.addEventListener('click', () => {
        price.forEach(elem => {
            totalPrice.forEach(res => {
               res.innerHTML = +elem;
            });
        });
    });
});

.container {
    background-color: aqua;
    display: flex;
    margin-right: 20px;
    width: 960px;
}

.item {
    width: 300px;
    background-color: bisque;
    text-align: center;
    margin-right: 30px;
}

.item:last-child {
    margin-right: 0px;
}

.price {
    margin: auto;   
    background-color: rgb(140, 140, 140)
}

.block__minus__plus {
    display: flex;
}

.minus {
    cursor: pointer;
    border: 1px solid #000;
    width: 50px;
}

.plus {
    margin-left: auto;
    cursor: pointer;
    border: 1px solid #000;
    width: 50px;
}

.total_price {
    margin-left: 95px;
}

<div class="container">
  <div class="item">
      <p class="price">200</p>
      <div class="block__minus__plus">
          <div class="minus">-</div>
          <div class="total_price">0</div>
          <div class="plus">+</div>
      </div>
  </div>
  <div class="item">
      <p class="price">400</p>
      <div class="block__minus__plus">
          <div class="minus">-</div>
          <div class="total_price">0</div>
          <div class="plus">+</div>
      </div>

  </div>
  <div class="item">
      <p class="price">100</p>
      <div class="block__minus__plus">
          <div class="minus">-</div>
          <div class="total_price">0</div>
          <div class="plus">+</div>
      </div>

  </div>

</div>

Answer 1

Я сам новичок в javascript, но уже есть чем поделиться. Во-первых создайте файл script.js и подключите его в конце перед тегом body.Вот так должна выглядеть строчка:

<script type='text/javascript' src='script.js'></script>

Потом, желательно изменить тег + и -(да и вообще все кнопки) на button.И добавьте параметр onclick=func() - при нажатии на кнопку будет выполняться функция func.Синтаксис такой:

<button onclick=func()>+<button>

А потом создаете в файле функцию func.И там пишите код.Весь код писать нее буду, но укажу некоторые функции: getElementsByTagName, innerHTML. Подробнее об этих функциях узнайте в инете.Надеюсь я вам хоть капельку помог

Answer 2

Почему не приложили свои попытки решения проблемы?

Сделал листалку +/-, дальше уже сами.

addEventListener(`click`, e => {
  if (!e.target.classList.contains(`minus`) && !e.target.classList.contains(`plus`)) return;
  const $price = e.target.parentElement.querySelector(`.total_price`);
  $price.textContent = Math.max(0, +$price.textContent + (e.target.classList.contains(`minus`) ? -1 : 1));
})

.container {
  background-color: aqua;
  display: flex;
  margin-right: 20px;
  width: 960px;
}

.item {
  width: 300px;
  background-color: bisque;
  text-align: center;
  margin-right: 30px;
}

.item:last-child {
  margin-right: 0px;
}

.price {
  margin: auto;
  background-color: rgb(140, 140, 140)
}

.block__minus__plus {
  display: flex;
}

.minus {
  cursor: pointer;
  border: 1px solid #000;
  width: 50px;
}

.plus {
  margin-left: auto;
  cursor: pointer;
  border: 1px solid #000;
  width: 50px;
}

.total_price {
  margin-left: 95px;
}

<div class="container">
  <div class="item">
    <p class="price">200</p>
    <div class="block__minus__plus">
      <div class="minus">-</div>
      <div class="total_price">0</div>
      <div class="plus">+</div>
    </div>
  </div>
  <div class="item">
    <p class="price">400</p>
    <div class="block__minus__plus">
      <div class="minus">-</div>
      <div class="total_price">0</div>
      <div class="plus">+</div>
    </div>

  </div>
  <div class="item">
    <p class="price">100</p>
    <div class="block__minus__plus">
      <div class="minus">-</div>
      <div class="total_price">0</div>
      <div class="plus">+</div>
    </div>

  </div>

</div>

БЛОГ НА HUSL

Как сделать, чтобы при клике на плюс или минус брать значение и в отдельный блок добавлять или отнимать это значение

Ответы (2 шт):