Skip to content

Changing div classes with Js

I’m trying to change classes of div with onclick, but there seems to be something wrong with my code because it doesn’t work.

function changeColorsDay() {
  document.getElementById("wrap").classList.toggle("Day", true);
}
* {
  margin: 0;
}
#wrap {
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
  font: italic bold 15px arial, sans-serif;
  background-color: rgb(0, 14, 51);
  overflow-y: scroll;
  background-size: cover;
}
wrap.Day {
  background-color: rgb(240, 230, 232);
}
<div id="nav">
  <a href="#" class="Button">Home Page</a>
  <a type="button" class="Button" onclick="changeColorsDay()">Change</a>
</div>

What can I do to make it work?

Answer

i believe you missed the ‘#’ in your css

#wrap.Day{
    background-color: rgb(240, 230, 232);
}