I'm a beginner and I set myself a challenge: create a darkmode for my portfolio with JS functions.
HTML :
<nav class="navbar dark-mode" id="navbar">
<ul class="navbar_links">
<li class="navbar_link first"><a href="#">Accueil</a></li>
<li class="navbar_link second"><a href="#">Service</a></li>
<li class="navbar_link third"><a href="#">Mission</a></li>
<li class="navbar_link fourth"><a href="#">Portfolio</a></li>
<li class="navbar_link fifth"><a href="#">Contact</a></li>
</ul>
<img id="lightModeIcon" src="img/light-mode.png" alt="">
</nav>
JAVASCRIPT:
function lightMode() {
const lightModeIcon = document.getElementById('lightModeIcon');
const navbar = document.getElementById('navbar');
if (navbar.classList.contains("dark-mode")) {
lightModeIcon.addEventListener('click', () => {
navbar.classList.replace("dark-mode", "light-mode");
lightModeIcon.src = "img/dark-mode.png";
})
} else {
lightModeIcon.addEventListener('click', () => {
navbar.classList.replace("light-mode", "dark-mode");
lightModeIcon.src = "img/light-mode.png";
})
}
}
lightMode();
But I have a problem. I use "if...esle".
The "if" part works. But the "else" part doesn't work.
Normally, if the user has already clicked on the darkmode button, my #navbar doesn't contain the "dark-mode" class but ".light-mode". So the "else" part should run.
Think about when the code is running.
dark-mode is hard coded into the HTMLlightMode is called when the page loads.if statement binds one of the two event listenersThe condition for the else branch is never true when the function runs.
Write a single event listener, always bind it to the button, test what the current state is inside the event listener.
Note that you can detect the user's OS mode has pick your scheme based on that instead of having a completely separate UI to the rest of the user's system.
You're running this function once (presumably when the page is loaded), which will evaluate the condition once and register a single event listener (either the one that sets the class to dark mode, or the one that sets it to light mode). As such, clicks will do the same thing for the entirety.
Instead you should move your if-else check inside the event listener, such that you're checking the classes at the time of the click. This can be as simple as inverting the third and fourth lines of your function, e.g.:
const lightModeIcon = document.getElementById('lightModeIcon');
const navbar = document.getElementById('navbar');
// Always add this single event listener
lightModeIcon.addEventListener('click', () => {
// Check the condition inside the listener, take action based on the current state
if (navbar.classList.contains("dark-mode")) {
navbar.classList.replace("dark-mode", "light-mode");
lightModeIcon.src = "img/dark-mode.png";
} else {
navbar.classList.replace("light-mode", "dark-mode");
lightModeIcon.src = "img/light-mode.png";
}
});