I don't know how to fix up this bug in javascript func-CodePudding

I have a project that needs darkmode & lightmode, so I made a btn that when onclick it calls a function named swipe12; and I have a var name swipe = 1;

only all the elements set dark but they never become white; I think I can use doWhile but idk how.

var swipe = 1; // 0 => lightmode & 1 => DarkMode

function swipe12(swip = swipe) {
  if (swip === 0) {
    console.log(swip);
    const swipeLight = document.getElementsByClassName('swipeLight');
    for (let x = 0; x < swipeLight.length; x  ) {
      console.log('white')
      swipeLight[x].style.backgroundColor = 'white';
    }
    var swip = 1;
    // return true;
  }
  if (swip === 1) {
    console.log(swip);
    const swipeLight = document.getElementsByClassName('swipeLight');
    for (let i = 0; i < swipeLight.length; i  ) {
      console.log('black')
      swipeLight[i].style.backgroundColor = 'black';
    }
    var swip = 0;
    // return true;
  }
}

CodePudding user response：

This is a possible solution for your problem, by using the logical not operation (!) you can turn the swipe variable from 0 to 1 and vise versa, this transformation should be done whenever you call your function in my case am using a button to demonstrate

ignore the css part its just for demonstration

let swipe = 0; // 0 => lightmode & 1 => DarkMode
const swipeLight = document.querySelectorAll('.swipeLight');
const btn = document.querySelector('#changeTheme');

// Call your function like this
btn.addEventListener('click', () => {
    // 0 will turn to 1 and vise versa
    swipe = !swipe;
    swipe12(swipe)
});

function swipe12(mode){
    swipeLight.forEach(element => {
        // if swipe = 1                                   // if swipe = 0
        swipe ? element.style.backgroundColor = 'black' : element.style.backgroundColor = 'white';
    });
}

div {
  height: 30px;
  width: 100px;
}

<div ></div>
<br>
<div ></div>
<br>
<div ></div>
<button id="changeTheme">Change theme</button>

CodePudding user response：

You are trying to swicth the value of swip which is local variable. Change it to swipe. also remove var. re-declaring makes the variable local

var swipe = 1; 

function swipe12(swip = swipe){
    if(swip === 0){        
        const swipeLight = document.getElementsByClassName('swipeLight');

        for(let x = 0; x < swipeLight.length; x  ) {
            console.log('white')
            swipeLight[x].style.backgroundColor = 'white';
        }
        // remove var and change to swipe
         swipe = 1;
    }
    if(swip === 1){
        console.log(swip);
        const swipeLight = document.getElementsByClassName('swipeLight');
        for(let i = 0; i < swipeLight.length; i  ) {
            console.log('black')
            swipeLight[i].style.backgroundColor = 'black';
        }
        // remove var and change to swipe
         swipe = 0;
    }
}

CodePudding user response：

I refactored the code a little bit, hope this helps. Feel free to ask any questions

<html>
  <head>
    <meta charset="UTF-8" />
    <script type="text/javascript">
      // 0 for light, 1 for dark
      var darkMode = 0;
      const elements = document.getElementsByClassName("swipeLight");

      function swipe() {
        darkMode = !darkMode;
        for (let i = 0; i < elements.length; i  ) {
          elements[i].style.backgroundColor = darkMode ? "black" : "red";
        }
      }
    </script>
  </head>

  <body>
    <button onclick="swipe()">Switch theme</button>
    <div >Text</div>
  </body>
</html>