Native JS element class toggle

by Dmitry Nazarov

HTML

<div class="wrapper">
  <div class="container">Click</div>
</div>

CSS

.wrapper{
  width: min-content;
  padding: 10px;
  background-color: black;
}

.container{
  display: flex;
  align-items: center;
  justify-content: center;
  
  height: 100px;
  width: 100px;
  
  font-size: 22px;
  
  background-color: white;
}

.container_color_red{
  background-color: red;
}

JavaScript

const container = document.querySelector(".container");

container.onclick = function(){
	container.classList.toggle("container_color_red");
}