[javascript]addeventlistener is not a function 에러 해결

1. 오류 발생

js를 통해 요소에 클릭>토글 이벤트를 추가하려고보니 다음과 같은 에러메시지가 표시되었다

오타도 없고, 지금까지 잘썼던 addEventListener가 왜 작동을 안하는걸까 🤔

2. 원인 분석

오류가 발생한 js 전체코드

let buketObj = document.getElementsByClassName('list_obj');
let buketObjLenth = buketObj.length;
//문제가 되는 부분
buketObj.addEventListener('click',function(){
buketObj[i].classList.toggle('active');
});코드를 입력하세요

원인 분석을 위해 여기저기 뜯어보던중 한가지 놓친점을 발견했다
getElementsByClassName()를 사용해서 가져온 요소는 배열과 비슷한 객체(array-like object) 형태이라는 점이였다!

즉 요소 중 클릭 이벤트를 적용할 요소 지정이 필요했던 것!

3. 해결

list_obj라는 클레스를 갖는 요소에 모두 이벤트를 줘야 하기 때문에 for문을 사용해서 코드를 수정했다

let buketObj = document.getElementsByClassName('list_obj');
let buketObjLenth = buketObj.length;
//수정한 부분
for(let i = 0; i < buketObjLenth; i++){
    console.log(buketObj[i]);
    buketObj[i].addEventListener('click',function(){
        buketObj[i].classList.toggle('active');
    });
}

코드 수정 후 지정한 이벤트가 잘 적용되는걸 확인할 수 있었다 🙌