언어/ErrorNote

[오늘의 에러] input.addEventListener is not a function (해결방법)

여그린 2022. 10. 25. 10:12

# 문제 

자바스크립트에서 클릭이나 스크롤 이벤트를 추가하려고 하는데 addEventListener is not a function 에러가 발생했다 🤔

 

# 원인

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

그래서 getElementsByClassName()를 사용한다면 length만큼 for문을 이용하거나

아래처럼 가져올 요소가 하나일 경우 [0]번째 요소임을 명시해야 한다.

 

# 해결

input 배열 내 아무 index를 붙이지 않은 채 아래처럼 가져올 경우, 

 

 

우측 콘솔창의 에러와 같이 input.addEventListener is not a function 에러가 발생한다.

 

 

 

 

그러나 input[0]로 인덱스를 함께 달아줄 경우,

 

 

 

에러가 발생하지 않고 원하는대로 alert창이 노출된다.

 

 

 

오늘은 여기까지-! 💪