Как при повторном нажатии вернуть исходный цвет?. JS HTML CSS

Question

Как при повторном нажатии вернуть исходный цвет?. JS HTML CSS

Мага Мага Ученик (141), на голосовании 1 год назад

<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">

<style>
/* css стили */

</style>
</head>
<body>

<form class="form_1">
FORM
<div class="div_1">
DIV
<p class="p_1">
P
</p>
</div>
</form>

<script>
let form_1 = document.querySelector('.form_1');

form_1.onclick = function (event){
event.target.style .backgroundColor = 'yellow';
};
</script>

</body>
</html>

При нажатии на form, div или p меняется цвет на желтый. Нужно чтоб при повторном нажатии возвращался исходный цвет. Здесь используется ВСПЛЫТИЕ. Вопрос: Как лучше реализовать возврат цвета при повторном нажатии?

Конечно можно создать 3 булевых переменных и по ним определять, закрашен ли контейнер в желтый. Но мб есть решение получше?

Answer 1

Вы можете использовать метод classList.toggle() для добавления или удаления класса при каждом клике. В этом классе вы можете определить желаемый цвет фона. Вот пример кода:

 let form_1 = document.querySelector('.form_1'); 
 
form_1.onclick = function (event) { 
    event.target.classList.toggle('yellow'); 
};

А в вашем CSS файле или внутри тега <style> вы можете добавить следующий код:

 .yellow { 
    background-color: yellow; 
}