자바스크립트 이벤트리스너 루프?
본문
아래와 같이 모달창이 열리고 닫기 버튼 누르면 닫히게 자바스크립트를 넣었습니다.
모달이 열리는 것은 문제가 없는데, 모달 닫기할 때, 버튼을 클릭하면,
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
}
답변 1
display = none 이 화면에 안보이려고 하시는 거죠?
동작하지 않는게 아니라 css 에의해 동작하지 않는것처럼 보이는게 아닐까 싶습니다.
해당 dom 을 확인해보세요
이상하네요. 그 함수 내에서는 자바스크립트로 스타일 변경이 하나도 안되네요. 클래스로 조정하려고도 해봤는데요. classList.add('active') 로 클래스 추가는 되는데, 또 classList.remove('active')는 안됩니다..ㅠ
디버깅 툴을 이용해서 테스트 해보세요
뭔가 다른문제가 있나보네요
아 해결됐습니다. html 에서 closeDecoBnt 이 decodeInfo 안에 위치해 있어, 이벤트가 상속되어 이중으로 걸렸었네요. 고맙습니다.
답변을 작성하시기 전에 로그인 해주세요.
