Не работает слушатель события addEventListener

Question

Кнопки минус и плюс нашел по атрибуту data-action и занес в переменную buttPlus. Однако код.....слушатель события click не работает, выходит ошибка ...Uncaught TypeError: buttPlus.addEventListener is not a function at :1:10

// найти кнопку  +

let buttPlus = document.querySelectorAll('[data-action]');

// отследить клик по кнопке
butPlus.addEventListener('click', function() {
  console.log('привет');

});

<div class="items">
  <div class="items__control" data-action="minus">-</div>
  <div class="items__current" data-counter>1</div>
  <div class="items__control" data-action="plus">+</div>
</div>

Answer 1

querySelectorAll возвращает массив элементов, а у массива функции addEventListener нет

Answer 2

У Вас непонятный подход, и как мне кажется полностью неправильный, ибо даже не знаю, как его дальше развить и заставить работать (к тому же, опечатки в коде). Поэтому даю на выбор два варианта:

У каждой кнопки свой обработчик:

// найти счётчик
let buttCount = document.querySelector('[data-counter]');

// найти кнопку "-"
let buttMinus = document.querySelector('[data-action="minus"]');
// отследить клик по кнопке "-"
buttMinus.addEventListener('click', () => {
  buttCount.innerText = +buttCount.innerText - 1;
});

// найти кнопку "+"
let buttPlus = document.querySelector('[data-action="plus"]');
// отследить клик по кнопке "+"
buttPlus.addEventListener('click', () => {
  buttCount.innerText = +buttCount.innerText + 1;
});

<div class="items">
  <div class="items__control" data-action="minus">-</div>
  <div class="items__current" data-counter>1</div>
  <div class="items__control" data-action="plus">+</div>
</div>

Делегирование (обработчик на общем контейнере, с последующей проверкой):

// найти счётчик
let buttCount = document.querySelector('[data-counter]');

// найти контейнер
let buttItems = document.querySelector('div.items');
// отследить клик в контейнере
buttItems.addEventListener('click', (ev) => {
  let sData = ev.target.dataset.action;
  // отследить клик по кнопке "-"
  if (sData == 'minus') {
    buttCount.innerText = +buttCount.innerText - 1;
    // отследить клик по кнопке "+"
  } else if (sData == 'plus') {
    buttCount.innerText = +buttCount.innerText + 1;
  }
});

<div class="items">
  <div class="items__control" data-action="minus">-</div>
  <div class="items__current" data-counter>1</div>
  <div class="items__control" data-action="plus">+</div>
</div>

БЛОГ НА HUSL

Не работает слушатель события addEventListener

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