• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

선생님 완전 초보 질문 하나 드립니다! ㅜㅜ 도와주세요!

22.03.30 02:44 작성 조회수 227

0

(function(){
 
const parents = document.querySelector('.stage'); function clickEvent(e) { const tar = e.target; const tar2 = tar.parentNode.classList.contains('door-opened'); if(tar2){ // tar2.parentNode.classList.remove('door-opened'); console.log(tar2.target); } if(tar.classList.contains('door-body')){ tar.parentNode.classList.add('door-opened'); } }; parents.addEventListener('click', clickEvent); })();
 
이렇게 했을때 마지막 if문은 실행이 되는데요(문 열리는것) 위에 if문은 실행이 안되고 tar2 값을 찾을 수 없다고 나옵니다 ㅠㅠ
 
문 열리는 if문이 실행되면서 door-opened 클래스가 붙으면
다시 위로 올라가서 위에 if문 실행하면서 tar2값을 찾을 수 있는거 아닌가요?
 
이해한 줄 알았는데.. 혼자 풀어볼려다 갑자기 머리가 다시 뒤죽박죽이 되버려서요ㅠㅠ
번거로우시겠지만 여쭤볼 곳이 딱히 없어서 죄송함 무릅쓰고 질문올립니다

답변 1

답변을 작성해보세요.

0

classList.container 메서드는, 엘리먼트에 해당 CSS 클래스가 있냐없냐를 true/false boolean값으로 리턴하기 때문에, tar2 자체가 true 또는 false입니다.
그러니까 당연히 tar2.parentNode라든지 tar2.target에는 접근할 수 없겠죠~ true나 false 값이 parentNode를 가질 리는 없으니까요^^
if문 안을 아래처럼 수정해보세요!

tar.parentNode.classList.remove('door-opened');
console.log(tar2);

(function(){

 

                    const parents = document.querySelector('.stage'); 

                    

                    function clickEvent(e) { 

                        

                        const tar = e.target; 

                        const tar2 = tar.parentNode.classList.contains('door-opened');

                        

                        if(tar2){ 

                            tar.parentNode.classList.remove('door-opened'); 

                            console.log(tar2); 

                        } 

                        

                        if(tar.classList.contains('door-body')) { 

                            tar.parentNode.classList.add('door-opened'); 

                        } 

                    }; 

                    

                    

                    parents.addEventListener('click', clickEvent); 

                

                })();

 

선생님 이렇게 맞나요?? 이렇게 하니까 tar2값이 true로 오류없이 인식이 잘 되긴 합니다! remove가 인식이 안되는건지..문이 닫히는건 안되지만요 ㅠㅠ 

혼자 짜보는게 힘들어서 영상에서 알려주신 방법 통으로 외웠어요! 답변 감사합니다!!