Не получается повесить addEventListener на div с кнопками(выдает ошибку что addeventlistener is not a function)

Question

const buttonContainer = document.getElementsByClassName(`btn-container`);
const upperSectionButtons = document.getElementsByClassName(`top-btn`);
buttonContainer.addEventListener('onclick', function(event) {
  for (let item of upperSectionButtons) {
    item.classList.remove(`active-btn`)
  }
  event.target.classList.add(`active-btn`)
})

Answer 1

Вы получаете данные через getElementsByClassName(btn-container), что подразумевает получение нескольких значений.

Вам необходимо либо ввести цикл, либо проставлять индекс при использовании addEventListener.

 const buttonContainer = document.getElementsByClassName(`btn-container`);
const upperSectionButtons = document.getElementsByClassName(`top-btn`);
buttonContainer[0].addEventListener('click', function (event) { ...}

Если перебирать все кнопки и элементы с классом top-btn, то примерно так:

    const buttonContainer = document.getElementsByClassName(`btn-container`);
    const upperSectionButtons = document.getElementsByClassName(`top-btn`);

    for (let i=0;i<buttonContainer.length; i++) {
        buttonContainer[i].addEventListener('click', function (event) {
            for (let item of upperSectionButtons[i]) {
                item.classList.remove(active - btn)
            }
            event.target.classList.add(active - btn)
        })
    }

Answer 2

Во-первых не 'onclick', а 'click'. Во-вторых, у Вас не элемент, для которого можно было сделать addEventListener, а массив элементов.

БЛОГ НА HUSL

Не получается повесить addEventListener на div с кнопками(выдает ошибку что addeventlistener is not a function)

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