Как при помощи js изменить цвет блока по клику? И как спрятать по клику блок?

Сделала кнопку:

<a class="btn" href="#" onclick="change_color()">OK</a>

И в css блок:

.child {
width: 60%;
height: 20%;
margin-right: 2%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.child:last-child { margin-right: 0; }

Подскажите, пожалуйста, что сделать чтобы этот блок менял цвет по клику? И какой код нужен для того, чтобы его скрыть по клику?


Ответы (1 шт):

Автор решения: Igor
.child-colored {
  background-color: red;
}
.child-hidden {
  display: none;
}

function change_color() {
  document.querySelectorAll('.child').forEach(i => i.classList.add('child-colored'));
}
function hide_child() {
  document.querySelectorAll('.child').forEach(i => i.classList.add('child-hidden'));
}
→ Ссылка