По когда страница загружается впервые раз там выделены
Выбрать все и все
Сфера жизни а
Сброс не выделен.
Как сделать что бы когда нажимаешь
Сброс выделение у всех пропадает кроме
Сброс и кнопка
.knopka_random становится не доступна с надписью
НУЖНО Выбрать хоть одну сферу
Ну и соответственно когда нажимаешь хоть на одну
Сфера жизни то она выделяется и
Сброс выделение пропадает.
.knopka_random становится доступна с надписью по умолчанию.
А когда снова нажимаешь
Выбрать все снова идет выделение как всех
Сфера жизни .knopka_random становится доступна с надписью по умолчанию.
И все состоянии этих кнопок записались localStorage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
main{
width: 280px;
margin: 40px auto;
font-size: 10px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.tema_nastroika {
margin: 20px 0px 20px 0px;
}
.nastroika_blok {
}
.vse {
cursor: pointer;
margin: 10px 0px 10px 0px
}
.sbros {
cursor: pointer;
margin: 10px 0px 10px 0px
}
.sfera_1 {
cursor: pointer;
margin: 10px 0px 10px 0px
}
.sfera_2 {
cursor: pointer;
margin: 10px 0px 10px 0px
}
.sfera_3 {
cursor: pointer;
margin: 10px 0px 10px 0px
}
.sfera_4 {
cursor: pointer;
margin: 10px 0px 10px 0px
}
.sfera_5 {
cursor: pointer;
margin: 10px 0px 10px 0px
}
.vybrano{
color: blueviolet;
text-decoration: underline;
}
.tema_nazvanie{
margin: 20px 0px 20px 0px;
color: #0e9fff;
}
.tema_random {
margin: 20px 0px 20px 0px;
}
.knopka_random{
display: flex;
justify-content: center;
align-items: center;
width: 280px;
height: 70px;
border: 1px solid #0e9fff;
color: #0e9fff;
cursor: pointer;
}
.knopka_random:hover{
border: 1px solid blueviolet;
color: blueviolet;
}
.tema_vremy {
}
</style>
</head>
<body>
<main>
<div class="tema_nastroika">
<div class="nastroika_blok">
<div class="sfera vse vybrano">Выбрать все</div>
<div class="sfera sbros">Сброс</div>
<div class="sfera sfera_1 vybrano">Сфера жизни 1</div>
<div class="sfera sfera_2 vybrano">Сфера жизни 2</div>
<div class="sfera sfera_3 vybrano">Сфера жизни 3</div>
<div class="sfera sfera_4 vybrano">Сфера жизни 4</div>
<div class="sfera sfera_5 vybrano">Сфера жизни 5</div>
</div>
</div>
<div class="tema_nazvanie">
<div class="blok_sfera_1">
<p>Название темы по сфере 1 Вопрос №1</p>
<p>Название темы по сфере 1 Вопрос №2</p>
<p>Название темы по сфере 1 Вопрос №3</p>
<p>Название темы по сфере 1 Вопрос №4</p>
<p>Название темы по сфере 1 Вопрос №5</p>
</div>
<div class="blok_sfera_2">
<p>Название темы по сфере 2 Вопрос №2</p>
<p>Название темы по сфере 2 Вопрос №3</p>
<p>Название темы по сфере 2 Вопрос №1</p>
<p>Название темы по сфере 2 Вопрос №4</p>
<p>Название темы по сфере 2 Вопрос №5</p>
</div>
<div class="blok_sfera_3">
<p>Название темы по сфере 3 Вопрос №1</p>
<p>Название темы по сфере 3 Вопрос №2</p>
<p>Название темы по сфере 3 Вопрос №3</p>
<p>Название темы по сфере 3 Вопрос №4</p>
<p>Название темы по сфере 3 Вопрос №5</p>
</div>
<div class="blok_sfera_4">
<p>Название темы по сфере 4 Вопрос №1</p>
<p>Название темы по сфере 4 Вопрос №2</p>
<p>Название темы по сфере 4 Вопрос №3</p>
<p>Название темы по сфере 4 Вопрос №4</p>
<p>Название темы по сфере 4 Вопрос №5</p>
</div>
<div class="blok_sfera_5">
<p>Название темы по сфере 5 Вопрос №1</p>
<p>Название темы по сфере 5 Вопрос №2</p>
<p>Название темы по сфере 5 Вопрос №3</p>
<p>Название темы по сфере 5 Вопрос №4</p>
<p>Название темы по сфере 5 Вопрос №5</p>
</div>
</div>
<div class="tema_random">
<div class="knopka_random">
Случайная тема
</div>
</div>
<div class="tema_vremy">
Сколько времени осталось
</div>
</main>
<script>
let vse = document.querySelector(".vse");
const sferes = document.querySelectorAll(".sfera");
sferes.forEach(function(sfera){
sfera.addEventListener("click", function (event){
sfera.classList.toggle("vybrano");
console.log(sfera);
if (vse.classList.contain("vybrano")) {
console.log("выбрано все");
}
});
});
</script>
</body>
</html>