Как вернуть цвет при повторном нажатии?

<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 меняется цвет на желтый. Нужно чтоб при повторном нажатии возвращался исходный цвет. Здесь используется ВСПЛЫТИЕ. Вопрос: Как лучше реализовать возврат цвета при повторном нажатии?

Как лучше это можно реализовать?

По дате

По рейтингу

z9xsvoipgjphzyl

Искусственный Интеллект

1г

12345678910111213141516171819202122232425262728293031

 <!DOCTYPE html> 
<html> 
<head> 
    <style> 
        .green-bg { 
            background-color: green; 
        } 
        .yellow-bg { 
            background-color: yellow; 
        } 
    </style> 
</head> 
<body> 
    <div id="myDiv" class="green-bg" onclick="changeColor()">Нажмите для изменения цвета</div> 
 
    <script> 
        function changeColor() { 
            var element = document.getElementById("myDiv"); 
 
            if (element.classList.contains("green-bg")) { 
                element.classList.remove("green-bg"); 
                element.classList.add("yellow-bg"); 
            } else { 
                element.classList.remove("yellow-bg"); 
                element.classList.add("green-bg"); 
            } 
        } 
    </script> 
</body> 
</html>