Why my switch mode in popup mode not moving?

Question

I have 2 mode switches. first for the navbar and second, for the popup when the website is first visited. Everything works fine except, in popup mode the switch doesn't move but the body has changed to dark mode / light mode.

i have tried to change the id for each switch but it still doesn't work. My main problem is, the switch in the popup doesn't move.

Can anyone handle it? where did i go wrong?

For full code, you can see in My Codepen


   
   
     
     
   


 
        
            
                
                    
                        
                            
                                Welcome
                                
                                    You can switch the button from light mode
to dark mode
                                
                            
                            

                                
                                    
                                    
                                        
                                        
                                    
                                
                            
                            
                                UNDERSTAND

window.onload = function() {
  
  $("#popupMode").delay(3000).fadeIn(500);

  if (localStorage.darkMode == "true") {
    document.body.classList.toggle('dark');
    document.getElementById("chk").checked = true;
  } else {
    document.body.classList.toggle('light');
  }
};

document.getElementById("chk").addEventListener('change', () => {
  document.body.classList.toggle('dark');
  document.body.classList.toggle('light');
  localStorage.darkMode = (localStorage.darkMode == "true") ? "false" : "true";
});

$("#buttonPopupMode .button-primary").on('click', function() {
  $('#popupMode').hide();
})

user_13669048 · Answer

Firstly you need to use a class on your checkbox inputs instead of id as id's need to be unique in page to avoid issues.

Also, to check all checkbox and using one addEventListener we need to use forEach loop to get all the elements and assign change event on them. This includes both your popup and nav body toggle switches .

In addition, i have simplified your code by using only JS except fadeIn() and delay(). Also use DOMContentLoaded ,method to make sure all the scripts are ready to be used when DOM is ready.

Live Working Demo: (You need to test on your browser since Stack Snippets does not localStorage)

window.addEventListener('DOMContentLoaded', (event) => {

  //get all elements
  let getChecks = document.querySelectorAll('.checkBox_Toggle')
  let navCheckBox = document.querySelector('#chk_nav')
  let underStandBtns = document.querySelector('#buttonPopupMode .button-primary')
  let popUpEl = document.querySelector('#popupMode')

  //onload change checked 
  $('#popupMode').delay(3000).fadeIn(500);
  //check localStorage
  if (localStorage.darkMode == "true") {
    document.body.classList.toggle('dark');
    //set all switches to true
    getChecks.forEach(function(checkbox) {
      checkbox.checked = true;
    })
  } else {
    document.body.classList.toggle('light');
  }

  //Event Listener
  getChecks.forEach(function(checkbox) {
    checkbox.addEventListener('change', (e) => {
      if (e.target.getAttribute('id') == 'chk_popUp' && e.target.checked) {
            console.log('fdfd')
            navCheckBox.checked = true;
        } else if (e.target.getAttribute('id') == 'chk_nav' && e.target.checked) {
            navCheckBox.checked = true;
        } else {
            navCheckBox.checked = false;
        }
      document.body.classList.toggle('dark');
      document.body.classList.toggle('light');
      localStorage.darkMode = (localStorage.darkMode == "true") ? "false" : "true";
    });
  })

  //hide popup
  underStandBtns.addEventListener('click', () => {
    popUpEl.style.display = 'none';
  })

});

#modeSwitcher {
  margin: 5% 50%;
}

#modeSwitcher .checkbox {
  opacity: 0;
  position: absolute;
}

#modeSwitcher .checkbox:checked+.label .ball {
  transform: translateX(35px);
}

#modeSwitcher .checkbox:checked+.label .ball::after {
  content: '';
  position: absolute;
  background-color: #0A0E27;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  bottom: 50%;
  left: -5%;
  transform: translateY(50%);
}

#modeSwitcher .label {
  background-color: #0A0E27;
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
  margin: 0;
  position: relative;
  height: 16px;
  width: 50px;
  transform: scale(1.5);
}

#modeSwitcher .label .fa-moon {
  color: #0A0E27;
}

#modeSwitcher .label .ball {
  background-color: #FDC503;
  border-radius: 50%;
  position: absolute;
  top: 3px;
  left: 3px;
  height: 20px;
  width: 20px;
  transform: translateX(0px);
  transition: transform 0.2s linear;
}

#popupMode {
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(22, 33, 92, 0.95);
  position: fixed;
  top: 0;
  z-index: 25;
}

#popupMode .main-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

#popupMode .main-content #modeChoice {
  padding: 80px;
  background-color: #fff !important;
  border-radius: 20px;
  padding: 80px 85px 100px 85px;
}

@media screen and (max-width: 1600px) {
  #popupMode .main-content #modeChoice {
    padding: 56px 60px 70px 60px;
  }
}

#popupMode .main-content #modeChoice .title {
  text-align: center;
}

#popupMode .main-content #modeChoice .title h2 {
  color: #000;
  font-size: 40px;
}

@media screen and (max-width: 1600px) {
  #popupMode .main-content #modeChoice .title h2 {
    font-size: 28px;
  }
}

#popupMode .main-content #modeChoice .title p {
  color: #808080;
  font-size: 15px;
  margin-top: 20px;
}

@media screen and (max-width: 1600px) {
  #popupMode .main-content #modeChoice .title p {
    font-size: 13px;
    margin-top: 15px;
  }
}

#popupMode .main-content #modeChoice .choose-mode {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 60px 0 90px 0;
}

@media screen and (max-width: 1600px) {
  #popupMode .main-content #modeChoice .choose-mode {
    margin: 42px 0 63px 0;
  }
}

#popupMode .main-content #modeChoice .choose-mode p {
  color: #4b4b4b;
}

@media screen and (max-width: 1600px) {
  #popupMode .main-content #modeChoice .choose-mode p {
    font-size: 10px;
  }
}

#popupMode .main-content #modeChoice .choose-mode p.right {
  color: #c4c4c4;
  font-size: 13px;
}

@media screen and (max-width: 1600px) {
  #popupMode .main-content #modeChoice .choose-mode p.right {
    font-size: 10px;
  }
}

#popupMode .main-content #modeChoice #modeSwitcher label {
  background-color: #FCFCFC;
  border: 1px solid #D5D5D5;
}

#popupMode .main-content #modeChoice #modeSwitcher label .fa-moon {
  color: #FCFCFC;
}

#popupMode .main-content #modeChoice #modeSwitcher label .ball {
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
}

#popupMode .main-content #modeChoice #buttonPopupMode {
  display: flex;
  justify-content: center;
}

#popupMode .main-content #modeChoice #buttonPopupMode .button-primary {
  width: unset;
}

@media screen and (max-width: 1600px) {
  #popupMode .main-content #modeChoice #buttonPopupMode .button-primary {
    padding: 13px 50px;
    font-size: 12px;
  }
}

body.dark {
  background-color: black;
}

body.light {
  background-color: whitesmoke;
}



  
  
     
     
   




  
    
      
        
          
            Welcome
            
              You can switch the button from light mode
to dark mode
            
          
          

            
              
              
                                        
                                        
                                    
            
          
          
            UNDERSTAND

Why my switch mode in popup mode not moving?

1 Answers