Как изменить цвет блока по клику

@SalavatGood · Регистрация: 18.12.2018

Author24 — интернет-сервис помощи студентам

Имеется файл index.php:

PHP/HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-3"><div class="block elem1">Элемент1</div>
        </div>
            <div class="col">
                <div class="row"><div class="block elem2">Элемент2</div></div>
                <div class="row"><div class="block elem3">Элемент3</div></div>
                <div class="row"><div class="block elem4">Элемент4</div></div>
 
        </div>
        </div>
    </div>
    <script>
        (function () {
            var el1 = document.getElementsByClassName('elem1')
            el1.onclick = function() {
                var el2 = document.getElementsByClassName('elem2')
                el2.style.color = ('#ddd') ? 'red' : '#ddd';
            }
        })
    </script>
</body>
</html>

И style.css:

CSS

* {
    box-sizing: border-box;
}
 
body {
    margin: 0;
    font-size: 30px;
}
 
/*.col-3{
    background-color: #eee;
    border: 1px solid #aaa;
}*/
 
 
.block {
    background-color: #ddd;
    border: 1px solid #aaa;
    padding: 40px 0;
    text-align: center;
}
 
.col-3 .block {
    background-color: #ddd;
    border: 1px solid #aaa;
    padding: 160px 0;
    text-align: center;
}

Хочу чтобы при нажатии на блок Элемент1, менялся цвет Элемент2 и при повторном нажатии на Элемент1, цвет Элемент2 возвращался к исходному.
Каким образом это можно сделать?

@klyapa · 15.04.2022, 22:17

Javascript

let flag = true;
 
document.querySelector('.elem1').onclick = () => {
    document.querySelector('.elem2').style.backgroundColor = flag ? 'red' : '';
    flag = !flag;
};

	15.04.2022, 22:17