CODEWITHSUNDEEP
javascriptcss
Max
Max

Reputation: 186

Class added to ClassList is not being applied

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

Answers (2)

Girisha C
Girisha C

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

Vignesh Raja
Vignesh Raja

Reputation: 8791

This works.

You can use toggle or replace methods to achieve this.

MDN Docs for reference

  1. If toggle is used, each element must be toggled twice to add a class and to remove a class.
  2. If replace is used, then a single call is enough.

replace is not supported in IE, Safari.

  1. Don't use class to select the elements. Since you have changed the classes in first click, the elements cannot be selected again. Consider using 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

Related Questions