Reputation: 186
I am trying to make a page that when a button is pressed, the colors of the button and the background swap.
document.querySelector("body.light").classList.toggle("dark");
document.querySelector("button.dark").classList.toggle("light");
But even though the "dark" class is toggled on, it is not applied to the background. I've noticed that when I swap the CSS classes (put the .light class first instead of the .dark class), the reverse happens, where the background color changes, but not the button color. Is there an issue with the CSS?
Here is the full code, with a bunch of console.log's to show that the classes are definitely added:
var darklightArray;
function darklight() {
darklightArray = document.querySelector("body.light").classList;
console.log("Before");
console.log("body: ", document.querySelector("body.light").classList);
console.log("button: ", document.querySelector("button.dark").classList);
document.querySelector("body.light").classList.toggle("dark"); //Changes the class to dark, then toggled again turns it light
document.querySelector("button.dark").classList.toggle("light"); //Toggles the color of the button
//document.querySelector("button.dark").classList.remove("dark");
console.log("After");
console.log("body: ", document.querySelector("body.light").classList);
console.log("button: ", document.querySelector("button.dark").classList);
if (darklightArray.length == 2) {
document.querySelector("button.dark").innerHTML = "To light mode";
} else {
document.querySelector("button.dark").innerHTML = "To dark mode";
}
}
.dark {
background-color: #07000c;
color: #D8D8D8;
}
.light {
background-color: #F9F9F9;
color: #000000;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Darklight Testing</title>
<link rel="stylesheet" type="text/css" href="../css/darklight_testing.css">
<script src="darklight_testing.js" defer></script>
</head>
<body class="light">
<div class="darklight">
<button type="button" onclick="darklight()" class="dark">To dark mode</button>
</div>
Content
</body>
</html>
Upvotes: 2
Views: 2257
Reputation: 1960
The issue is you are appending class dark
and light
, but not replacing it with one another, few minor updates to your js
and css
and it works fine, hope it helps :)
var darklightArray;
function darklight() {
darklightArray = document.querySelector("button").classList;
document.querySelector("body").classList.toggle("dark");
document.querySelector("button").classList.toggle("dark");
if (darklightArray.length == 2) {
document.querySelector("button").innerHTML = "To light mode";
} else {
document.querySelector("button").innerHTML = "To dark mode";
}
}
body, button {
background-color: #F9F9F9;
color: #000000;
}
.dark {
background-color: #07000c;
color: #D8D8D8;
}
<div class="darklight">
<button type="button" onclick="darklight()" class="btn">To dark mode</button>
</div>
Content
Upvotes: 0
Reputation: 8791
This works.
You can use toggle
or replace
methods to achieve this.
toggle
is used, each element must be toggled twice to add a class and to remove a class.replace
is used, then a single call is enough.replace
is not supported in IE, Safari.
id
or data-
attributes.var darklightArray;
function darklight()
{
var bodyelem = document.body;
var buttonelem = document.getElementById("toggleButton");
bodyelem.classList.toggle("dark");
bodyelem.classList.toggle("light");
buttonelem.classList.toggle("light");
buttonelem.classList.toggle("dark");
}
.dark {
background-color: #07000c;
color: #D8D8D8;
}
.light {
background-color: #F9F9F9;
color: #000000;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Darklight Testing</title>
<link rel="stylesheet" type="text/css" href="../css/darklight_testing.css">
<script src="darklight_testing.js" defer></script>
</head>
<body class="light">
<div class="darklight">
<button type="button" id="toggleButton" onclick="darklight()" class="dark">To dark mode</button>
</div>
Content
</body>
</html>
Upvotes: 1