let dark = true;
function toggle() {
    dark = false;
    document.body.classList.toggle('dark-mode');
}

if (dark = false) {
    document.getElementById("logo").src="../../img/Kevin D (White).png";
}else {
    document.getElementById("logo").src="../../img/Kevin D (Black).png";
}

Above is my code. Whenever I click the button the image does not go to the white version, instead it just stays black even on a black background, how would I fix this? The code is also attached to a button which would call that function

CodePudding user response：

There are a few things to solve here:

• You need to call the if again when the variable changes, we do this by wrapping it in a function, then calling it on load and whenever the toggle is called.
• Toggle currently doesn't "toggle", set the value to !dark to invert it every time.
• The if is currently assigning the value false to the dark variable, we need to compare it instead, and since it's already a boolean, it can simply be if (dark) {}

var dark = true;

function toggle() {
  dark = !dark; // To actually toggle the variable you need to invert the current value
  document.body.classList.toggle('dark-mode');
  // After the variable is toggle, call the function to update the theme
  changeTheme()
}

function changeTheme() {
  if (dark) {
    console.log("It's dark!")
  } else {
    console.log("It's light!")
  }
}

// Call the function on load to set the initial theme
changeTheme()

// Add an event listener to call the toggle function
document.getElementById("toggle").addEventListener("click", toggle);

<div id="toggle">Toggle</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

let dark = true;

function toggle() {

  dark = !dark;
  
  document.body.classList.toggle('dark-mode');

  if (dark === false) {
    console.log('dark ===', dark, '>> set white img')
    // document.getElementById("logo").src = "../../img/Kevin D (White).png";
  } else {
    console.log('dark ===', dark, '>>set black img')
    // document.getElementById("logo").src = "../../img/Kevin D (Black).png";
  }
}

.dark-mode {
  background: black;
  color: white;
}

<button onclick="toggle()">toggle</button>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You have an error with the = sign. It should be ==

if (dark == false) {

CodePudding user response：

Little mistake. Instead of = have to use ==. And put the if condition inside the toggle function.

let dark = true;
function toggle() {
    dark = false;
    document.body.classList.toggle('dark-mode');
    if (dark == false) {
      document.getElementById("logo").src="../../img/Kevin D (White).png";
    } else {
      document.getElementById("logo").src="../../img/Kevin D (Black).png";
    }
}

console.log(dark)
toggle();
console.log(dark)

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>