자바스크립트 왕초보, forEach문 도와주세요 ㅠㅠ

Question

쑥스러워서 궁금증 같은 거 못 올리다가 오늘 처음 올려봐요...forEach문으로 모달 여러 개를 순회해서 (내용은 같음) 팝업을 띄우는 건데 Modal window

I'm a modal window 😍

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

이렇게 해봤는데 closeBtn은 function이 아니라는데 저렇게 쓰면 안 되는 건가요? forEach문은 어떻게 쓰는 건가요?제가 아직 너무 초보라 어디에 어떻게 뭐라고 검색해야 하는지도 감이 안 와서 선배님들께 죄송함을 무릅쓰고 여쭤봅니다...

fx · Accepted Answer

우선 closeBtn 이 function 이 아니라는 뜻이 아니고, closeBtn.addEventListener (즉 addEventListener) 가 함수가 아니라는 뜻이며, 약간 의역하면 closeBtn에 addEventListener 함수가 없다. 라는 의미를 전달해 주고 있습니다.없는 이유는 closeBtn이 배열이기 때문입니다. document.querySelectorAll 함수는 배열을 반환해 줍니다.openBtn 같은 경우는 문맥에 따라 배열이기도 하고, 배열의 원소 (즉 버튼) 이기도 합니다.openBtn.forEach ( // openBtn 은 버튼의 배열 (openBtn, i) => { // 이 줄의 openBtn은 순환하는 원소 즉 버튼따라서 올바른 코드는openBtn.forEach((openBtn, i) => { openBtn.addEventListener('click', openModal); }); closeBtn.forEach((closeBtn, i) => { closeBtn.addEventListener('click', closeModal); }); 처럼 나눠서 작성하는 것입니다. 그리고 변수명을 중복으로 사용 하면 혼란스럽기 때문에const openBtns = document.querySelectorAll(".show-modal"); 또는 const openBtnList = document.querySelectorAll(".show-modal");처럼 단일 버튼과 버튼 목록의 변수명을 다르게 지어 주는 것이 좋습니다.

자바스크립트 왕초보, forEach문 도와주세요 ㅠㅠ

1개의 답변

Q&A 목록