발견

html 에서 getElementByClassName() 으로 요소를 가져왔는데
addEventListener is not a function Error 라는 에러가 떴다.

아래는 문제의 코드.

원인

getElementsByClassName() 를 사용해서 가져온 요소는 배열이다.

해결

1) 그래서 getElementsByClassName() 로 가져온 요소에 addEventListenr 를 추가하려면 배열[index] 표시를 아래와 같이 해주거나,

const boxes = document.getElementsByClassName('box');
console.log(boxes); // 👉️ [div.box, div.box, div.box]

// ✅ addEventListener to first box
boxes[0].addEventListener('click', function onClick() {
  console.log('box clicked');
});

// ✅ addEventListener to all boxes
for (const box of boxes) {
  box.addEventListener('click', function onClick() {
    console.log('box clicked');
  });
}

(코드 출처)

2) querySelector()를 이용한다. getElementsByClassName()은 오류 나면서 querySelector()가 되는 이유는, getElementsByClassName() 는 배열을 반환하지만, querySelector()는 요소 하나만을 반환하기 때문이다.