I'm a beginner and I set myself a challenge: create a darkmode for my portfolio with JS functions.

HTML :

<nav  id="navbar">

    <ul >
        <li ><a href="#">Accueil</a></li>
        <li ><a href="#">Service</a></li>
        <li ><a href="#">Mission</a></li>
        <li ><a href="#">Portfolio</a></li>
        <li ><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.

CodePudding user response：

Think about when the code is running.

• dark-mode is hard coded into the HTML
• lightMode is called when the page loads.
• The if statement binds one of the two event listeners

The 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.

CodePudding user response：

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";
   }
});