[JS] querySelectorAll 에 addEventListener 하기

Problem

생성된 댓글 마다 삭제 버튼을 만드려고 video--comment--btn__delete 클래스에 해당하는 버튼마다 이벤트를 달아주려고 했더니 아래와 같은 에러가 발생하는 것을 확인했다.

const deleteBtn = document.querySelectorAll(".video--comment--btn__delete");

if (deleteBtn) {
  deleteBtn.addEventListener("click", handleDelete);
}

Scratch

querySelectorAll로 받은 결과를 console.log해보니, NodeList로 받는 것을 확인할 수 있었다.

NodeList안에 있는 요소를 반복문으로 하나하나 eventListener를 달아주면 된다!

if (deleteBtn) {
  deleteBtn.forEach((item) => {
    item.addEventListener("click", handleDelete);
  });
}