my toggle button in javascript seems to work fine in turning on lightmode from default darkmode by running a function that changes the CSS. However, when I flip the button again, it does not change. This is somewhat expected since there's no reason it would change. How would I go about switching it back?

Button HTML:

<label for="ID_HERE" class="toggle-switchy" >
    <input checked type="checkbox" id="ID_HERE">
        <span class="toggle" onclick="lightmode();"></span>
      <span class="switch"></span>
    </span>
</label>

JS for button:

function lightmode() {
  const bodyChanges = document.querySelectorAll('.margin_body');
  for (let i = 0; i < bodyChanges.length; i  ) {
    bodyChanges[i].style.background = 'white';
  }
  /*const bodyChanges = document.querySelectorAll('.margin_body');
  for (let i = 0; i < bodyChanges.length; i  ) {
    bodyChanges[i].style.backgroundImage = '';
  } */

  const paraChanges = document.querySelectorAll('.paragraph');
  for (let i = 0; i < paraChanges.length; i  ) {
    paraChanges[i].style.color = 'black';
  }
  const topTitleChanges = document.querySelectorAll('.toptitle');
  for (let i = 0; i < topTitleChanges.length; i  ) {
    topTitleChanges[i].style.color = 'black';
  }
  const alphabetSChanges = document.querySelectorAll('.AlphabetS');
  for (let i = 0; i < alphabetSChanges.length; i  ) {
    alphabetSChanges[i].style.color = 'black';
  }
  const arowanaContainerChanges = document.querySelectorAll('.arowanacontainer');
  for (let i = 0; i < arowanaContainerChanges.length; i  ) {
    arowanaContainerChanges[i].style.background = 'white';
  }
  const fishContainerChanges = document.querySelectorAll('.fishcontainer');
  for (let i = 0; i < fishContainerChanges.length; i  ) {
    fishContainerChanges[i].style.background = 'white';
  }
  const articleContainerChanges = document.querySelectorAll('.articlescontainer');
  for (let i = 0; i < articleContainerChanges.length; i  ) {
    articleContainerChanges[i].style.background = 'white';
  }
  const sideTextChanges = document.querySelectorAll('.sidetext');
  for (let i = 0; i < sideTextChanges.length; i  ) {
    sideTextChanges[i].style.color = 'black';
  }
  const topMenuChanges = document.querySelectorAll('.topmenu');
  for (let i = 0; i < topMenuChanges.length; i  ) {
    topMenuChanges[i].style.background = '#fff2f2';
  }
  const h3Changes = document.querySelectorAll('h3');
  for (let i = 0; i < h3Changes.length; i  ) {
    h3Changes[i].style.background = '#fff2f2';
  }
  const articlePageChanges = document.querySelectorAll('.articlepage');
  for (let i = 0; i < articlePageChanges.length; i  ) {
    articlePageChanges[i].style.color = 'black';
  }
  const articleTeaserChanges = document.querySelectorAll('.articleteaser');
  for (let i = 0; i < articleTeaserChanges.length; i  ) {
    articleTeaserChanges[i].style.color = 'black';
  }
  /*const buttonTextChanges = document.querySelectorAll('.button_text');
  for (let i = 0; i < buttonTextChanges.length; i  ) {
    buttonTextChanges[i].style.color = '#0C0C0C';*/
  const box2Changes = document.querySelectorAll('.box2');
  for (let i = 0; i < box2Changes.length; i  ) {
    box2Changes[i].style.color = 'rgb(245, 245, 245)';
  }
  const box3Changes = document.querySelectorAll('.box3');
  for (let i = 0; i < box3Changes.length; i  ) {
    box3Changes[i].style.color = 'rgb(245, 245, 245)';
  }
  const projectPhoto1Changes = document.querySelectorAll('.projectphoto1');
  for (let i = 0; i < projectPhoto1Changes.length; i  ) {
    projectPhoto1Changes[i].style.backgroundImage = 'linear-gradient(to bottom, #Fdfcfa 50%, lightgrey 50%)';
  }
  const section1Changes = document.querySelectorAll('.section1');
  for (let i = 0; i < section1Changes.length; i  ) {
    section1Changes[i].style.backgroundColor = '#fff2f2';
  }
  const section1textChanges = document.querySelectorAll('.section1text');
  for (let i = 0; i < section1textChanges.length; i  ) {
    section1textChanges[i].style.color = 'black';
  }
  const section1smalltextChanges = document.querySelectorAll('.section1smalltext');
  for (let i = 0; i < section1smalltextChanges.length; i  ) {
    section1smalltextChanges[i].style.color = 'black';
  }
  const button_textChanges = document.querySelectorAll('.button_text');
  for (let i = 0; i < button_textChanges.length; i  ) {
    button_textChanges[i].style.color = 'black';
  }
  const polygonfrontChanges = document.querySelectorAll('.polygonfront');
  for (let i = 0; i < polygonfrontChanges.length; i  ) {
    polygonfrontChanges[i].style.fill = '#fff2f2';
  }
  const bgChanges = document.querySelectorAll('.bg');
  for (let i = 0; i < bgChanges.length; i  ) {
    bgChanges[i].style.backgroundImage = 'url(".jpg")';
  }
  const bg2Changes = document.querySelectorAll('.bg2');
  for (let i = 0; i < bg2Changes.length; i  ) {
    bg2Changes[i].style.backgroundImage = 'url(".jpg")';
  }
  const bg3Changes = document.querySelectorAll('.bg3');
  for (let i = 0; i < bg3Changes.length; i  ) {
    bg3Changes[i].style.backgroundImage = 'url(".jpg")';
  }
  
}

CodePudding user response：

When clicking, you should check the input status to know if the mode should toggle to light or dark mode.

<span class="toggle" onclick="toggle()"></span>

function toggle() {
    if(document.getElementById("ID_HERE").checked)
        lightmode()
    else
        darkmode()
}