Блог

Главная - Вопросы по программированию - Как уменьшить счетчик обратно до 0, если элементы удаляются

Как уменьшить счетчик обратно до 0, если элементы удаляются

#javascript

#javascript

Вопрос:

Предположим, что мы добавляем товары в корзину, и у нас есть значок, показывающий, сколько товаров мы добавили на данный момент, и прежде чем приступить к оформлению заказа, мы понимаем, что хотим или должны удалить некоторые из этих товаров…

используем ли мы .remove свойство для этой задачи и зацикливаем ли все товары внутри корзины?

я понимаю, как удалить строку товаров из корзины, но как мне поступить, если я хочу, чтобы значок также правильно отображал количество товаров, которые все еще находятся в корзине?

 if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', ready)
} else {
    ready()
}

function ready() {
var addToCartButtons = document.getElementsByClassName('button-4')
    for (var i = 0; i < addToCartButtons.length; i  ) {
        var button = addToCartButtons[i]
        button.addEventListener('click', addToCartClicked)
         }
var removeCartItemButtons = document.getElementsByClassName('remove_button')
    //loop through the buttons inside cart
    for (var i = 0; i < removeCartItemButtons.length; i  ) {
        // specifies the button with are targeting
        var button = removeCartItemButtons[i]
        // button reacts to the click event
        button.addEventListener('click', removeCartItem)
    }
 }
 
function addToCartClicked(event) {
    var button = event.target
        var itemCount = document.getElementsByClassName('total-qty')[0].innerText
    for (var i = 0; i < itemCount.length; i  ) {
    console.log(itemCount)
    var itemCount = document.getElementsByClassName('total-qty')[i];
            itemCount.innerText=parseInt(itemCount.innerText) 1;
    }
}

function removeCartItem(event) {
    var buttonClicked = event.target
    buttonClicked.parentElement.parentElement.remove()
}

https://jsfiddle.net/sigurd14/pmLzt23h/52/

Комментарии:

1. удалить удаляет все вы хотите вместо этого уменьшить счетчик?

2. о да, моя ошибка. я отредактирую заголовок. я имел в виду уменьшение

3. я также предполагаю, что моя скрипка неверна. Поскольку я только добавляю, а не проверяю, сколько товаров находится в корзине.

Ответ №1:

Вы можете просто использовать метод querySelector и установить innerText значение 0 в вашей remove() функции для уменьшения (сброса) вашего счетчика обратно в исходное состояние, которое является 0

Живая демонстрация:

 if (document.readyState == 'loading') {
  document.addEventListener('DOMContentLoaded', ready)
} else {
  ready()
}

function ready() {
  var addToCartButtons = document.getElementsByClassName('button-4')
  for (var i = 0; i < addToCartButtons.length; i  ) {
    var button = addToCartButtons[i]
    button.addEventListener('click', addToCartClicked)
  }
  var removeCartItemButtons = document.getElementsByClassName('remove_button')
  //loop through the buttons inside cart
  for (var i = 0; i < removeCartItemButtons.length; i  ) {
    // specifies the button with are targeting
    var button = removeCartItemButtons[i]
    // button reacts to the click event
    button.addEventListener('click', removeCartItem)
  }
}

function addToCartClicked(event) {
  var button = event.target
  var itemCount = document.getElementsByClassName('total-qty')[0].innerText
  for (var i = 0; i < itemCount.length; i  ) {
    //console.log(itemCount)
    var itemCount = document.getElementsByClassName('total-qty')[i];
    itemCount.innerText = parseInt(itemCount.innerText)   1;
  }
}

function removeCartItem(event) {
  var buttonClicked = event.target
  var qty = document.querySelector('.total-qty')
  qty.innerText = 0
}  
 .total-qty {
  position: absolute;
  height: 1.5rem;
  width: 1.5rem;
  background: #4312f2;
  color: white;
  border-radius: 50%;
  border: 1px solid #4312f2;
  text-align: center;
  line-height: 1rem;
  font-weight: 600;
  top: 0.3rem;
  right: 0.3rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.remove_button {
  padding: 0;
  background-color: transparent;
  color: #2a10ee;
  align-self: start;
}  
 <button class="button-4"> </button>
<div>
  <span class="total-qty">0</span>
  <button class="remove_button w-button" type="button">Remove</button>
</div>

Комментарии:

1. работал по мере необходимости. не могу отдать полезный голос, потому что у меня недостаточно репутации

2. @sigurd14 Рад это слышать. Удачного кодирования.

Ответ №2:

вам нужно добавить кнопку удаления для каждого товара в вашей корзине.

 if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', ready)
} else {
    ready()
}

function ready() {
var cart = document.getElementById('cart');
var addToCartButtons = document.getElementsByClassName('button-4')
    for (var i = 0; i < addToCartButtons.length; i  ) {
        var button = addToCartButtons[i]
        button.addEventListener('click', addToCartClicked)
         }
var removeCartItemButtons = document.getElementsByClassName('remove_button')
    //loop through the buttons inside cart
    for (var i = 0; i < removeCartItemButtons.length; i  ) {
        // specifies the button with are targeting
        var button = removeCartItemButtons[i]
        // button reacts to the click event
        button.addEventListener('click', removeCartItem)
    }
 }
 
function addToCartClicked(event) {
    var itemCount = document.getElementsByClassName('item');
    var newItem = createNewCartItem(itemCount.length 1);
    cart.append(newItem);
    updateCounter();
}
function createNewCartItem(item){
    var newItem =document.createElement('div');
    newItem.classList.add('item');
    var textWrapper = document.createElement('span');
    textWrapper.innerText = item;
    var removeBtn = createRemoveBtn();
    newItem.append(textWrapper);
    newItem.append(removeBtn);
    return newItem;
}

function createRemoveBtn(){
    var btn = document.createElement('button');
  btn.innerText = 'remove';
  btn.addEventListener('click', function(){
    this.parentNode.remove();
     updateCounter();
  });
  return btn;
}

function updateCounter(){
    var counter = document.getElementById('total-qty');
  var itemCount = document.getElementsByClassName('item');
  counter.innerText = itemCount.length;
}     
 .total-qty {
  position: absolute;
  height: 1.5rem;
  width: 1.5rem;
  background: #4312f2;
  color: white;
  border-radius: 50%;
  border: 1px solid #4312f2;
  text-align: center;
  line-height: 1rem;
  font-weight: 600;
  top: 0.3rem;
  right: 0.3rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.remove_button {
  padding: 0;
  background-color: transparent;
  color: #2a10ee;
  align-self: start;
}  
  <button class="button-4"> </button>
 <div>
 <span id="total-qty" class="total-qty">0</span>
 </div>
 <div id="cart">
   
 </div>