안녕하세요! 1기 챌린지 수강생 ‘코딩초보탈출’입니다.
2주차 자바스크립트 미션을 진행하면서 다크모드 토글 버튼을 구현하고 있는데, 생각대로 작동하지 않아 질문을 남깁니다. 혼자서 2시간째 구글링하며 이것저것 시도해봤지만 해결이 잘 안 되네요.
현재 구현하려는 기능
제가 만들고 싶은 기능은 다음과 같습니다.
- 헤더 우측에 있는 ‘다크모드’ 버튼을 클릭합니다.
<body>태그에.dark-theme클래스가 추가되면서 배경이 검은색으로 변해야 합니다.- 다시 버튼을 클릭하면 클래스가 제거되면서 원래대로(라이트모드) 돌아와야 합니다.
발생한 문제 (에러 증상)
버튼을 눌렀을 때 콘솔 창에는 아무런 에러 메시지가 뜨지 않는데, 화면 상의 색상은 전혀 변하지 않습니다. 개발자 도구(F12)의 Elements 탭을 확인해봐도 <body> 태그에 클래스가 추가되는 모습이 보이지 않습니다.
“혹시 자바스크립트 파일이 제대로 연결되지 않은 걸까요? 아니면 제가 이벤트를 잘못 건 걸까요?”
작성한 코드
아래는 제가 작성한 HTML 구조와 자바스크립트 코드 일부입니다.
// HTML <button id="theme-btn">다크모드</button> // JavaScript const themeBtn = document.getElementById('theme-button'); const body = document.querySelector('body'); themeBtn.addEventListener('click', function() { body.classList.toggle('dark-theme'); });
도움 부탁드립니다!
분명히 강의에서 본 classList.toggle() 메서드를 사용했는데, 왜 작동하지 않는 걸까요? 제가 놓치고 있는 사소한 오타나 개념이 있다면 멘토님들이나 동기분들의 날카로운 지적 부탁드립니다.
미리 감사드립니다!
감사합니다.
대댓글입니다.
일반 댓글입니다.