来回切换 JS 按钮

Posted 2023-02-18

【中文标题】来回切换 JS 按钮

【英文标题】：Toggling JS button back and forth

【发布时间】：2022-01-10 20:28:26

【问题描述】：

我在 javascript 中的切换按钮似乎可以通过运行更改 CSS 的函数从默认暗模式打开亮模式。但是，当我再次翻转按钮时，它不会改变。这在某种程度上是意料之中的，因为它没有理由改变。我将如何将其切换回来？

按钮 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：

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

【参考方案1】：

单击时，您应该检查输入状态以了解模式应该切换到亮模式还是暗模式。

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

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