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
There are a few things to solve here:
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.!dark to invert it every time.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>dark = !dark, so it's always setting to the opposite.if(dark === false) you can simply check if(!dark) or better swap the logic to not begin with a negation and say if(dark){'dark'}else{'not dark}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>You have an error with the = sign. It should be ==
if (dark == false) {