смена текста при нажатии на кнопку в корзину

Question

Как я могу сделать так, что бы событие срабатывало на любую кнопку и более одно раза? Сейчас срабатывает один раз и только когда жмешь на 0 эллемент. Либо вобще, как можно просто при появлении нового класса Просмотр корзины менять текст в определенном див.


document.querySelector('.add_to_cart_button').addEventListener("click", open);


function open(){
    document.querySelector('.add_to_cart_button').innerHTML = "В корзине";
};

Answer 1

Воспользуйтесь делегированием. То есть.. Нам нужно повесить на родительский блок, слушатель клика и когда мы будем клацать внутри данного блока - мы будем это видеть.

"Вверстку" сильно упростил, но в целом логика осталась та же и у вас JS код должен работать.

const products = document.querySelector('.products');

products.addEventListener('click', (event) =>
{
  const element = event.target;
  
  // Проверяем, на каком элемент был произведен клик
  if (element.classList.contains('add_to_cart_button'))
  {
    // Отменяем стандартное поведение (в данном случае - переход по ссылке)
    event.preventDefault();
    
    // Выводим информацию (href и элемент
    console.log(element.getAttribute('href'), element); )

    // Проверяем текст у элемента, если он будет "В корзине", в переменной будет true, иначе false
    const isCart = (element.textContent == 'В корзине');
    
    // Устанавливаем текст, в зависимости от текста на кнопки (Если было "В корзине" станет "В корзину" и наоборот)
    element.textContent = (isCart ? 'В корзину' : 'В корзине');
  }
});

<ul class="products">
  <li class="product">
    <div class="arctive-products_left">
      <!-- ... -->
      <a href="?add-to-cart=226" class="add_to_cart_button">В корзину</a>
    </div>
  </li>
  <li class="product">
    <div class="arctive-products_left">
      <!-- ... -->
      <a href="?add-to-cart=218" class="add_to_cart_button">В корзину</a>
    </div>
  </li>
  <li class="product">
    <div class="arctive-products_left">
      <!-- ... -->
      <a href="?add-to-cart=235" class="add_to_cart_button">В корзину</a>
    </div>
  </li>
</ul>

БЛОГ НА HUSL

смена текста при нажатии на кнопку в корзину

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