자바스크립트 이벤트리스너 루프?

JinyeongJang 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2020.12.10 10:42:19 2221 (220.♡.♡.151)

답변 1

본문

아래와 같이 모달창이 열리고 닫기 버튼 누르면 닫히게 자바스크립트를 넣었습니다.

모달이 열리는 것은 문제가 없는데, 모달 닫기할 때, 버튼을 클릭하면,

function closeDetailModal(index) 이 함수가 실행되게 해놧습니다.

이 함수 내에서 console.log 등을 확인 해봐도 index 값을 받아오거나 , 다른 element를 선택한다거사 하는 것은 정상적으로 됩니다. 그런데, element 선택해서 display none 처리 하는게 안되네요.

조언 좀 부탁드립니다. ㅠ


const designCode = document.querySelectorAll('.mmnco_tem_list_inner');
const designPreviewBnt = document.querySelectorAll('.mmnco_preview_bnt');
const designCodeModal = document.querySelector('#mmnco_decode_modal');
const decodeInfo = document.querySelectorAll('.mmnco_decode_info');
const closeDecoBnt = document.querySelectorAll('.mmnco_decode_info_close');
function openDetailModal(index) {
    designCodeModal.style.display = 'block';
    decodeInfo[index].style.display = 'block';
    document.querySelector('body').classList.add('scrol_hidden');
};
function closeDetailModal(index) {
    console.log(decodeInfo[index]);
    decodeInfo[index].style.display = 'none'; //이 부분이 실행이 안됩니다.
    designCodeModal.style.display = 'none'; //이 부분이 실행이 안됩니다.
    // document.querySelector('body').classList.remove('scrol_hidden');
}
for (let m = 0; m < designCode.length; m++) {
    
    (function () {
        designCode[m].addEventListener('click', function() { openDetailModal(m); } );
        closeDecoBnt[m].addEventListener('click', function() {
             closeDetailModal(m); //현재 이녀석이 문제
         });
        designPreviewBnt[m].addEventListener('click', function(e){ e.stopPropagation(); });
    }()); // immediate invocation
}