인프런 커뮤니티 질문&답변
작성한 질문수
선생님 완전 초보 질문 하나 드립니다! ㅜㅜ 도와주세요!
작성
·
366
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
1분코딩
지식공유자
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가 인식이 안되는건지..문이 닫히는건 안되지만요 ㅠㅠ
혼자 짜보는게 힘들어서 영상에서 알려주신 방법 통으로 외웠어요! 답변 감사합니다!!