Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.06.2022, 10:54
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

Сложный рандом
Я пробую сам написать, и пока до этого сложного рандома еще не дошел столкнулся с небольшой проблемой.

У меня скрипт который должен перебрать все элементы с .sfera и вроде бы все правильно сделал но почему то пишет ошибку.

<!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>
    const sfera = document.querySelectorAll(".sfera");
    for (let i=0, length = sfera.length; i < length; i++) {
        console.log(sfera);
    }
    sfera_vybr = () => {
        sfera.classList.toggle("vybrano");
    }
    sfera.addEventListener("click", sfera_vybr);
    </script>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 10.06.2022, 11:34
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,700

const sfera = document.querySelectorAll(".sfera");

Обратите внимание на All. All - значит все. Это же не один элемент, их много.
А раз их много, то нельзя делать

sfera.addEventListener("click", sfera_vybr);

addEventListener можно применять к 1 элементу, а не к массиву или списку.
Надо sfera пройти в цикле и к каждому элементу задать обработчик событий.

Так же нельзя делать
sfera.classList.toggle("vybrano");

.classList - это свойство элемента, а не списка.

PS Вы же уже давно пишете какие то программы. Почему Вы до сих пор не пользуетесь инструментами разработчика? Не смотрите в консоль. Там же все ошибки написаны обычно.

Последний раз редактировалось voraa, 10.06.2022 в 11:38.
Ответить с цитированием
  #3 (permalink)  
Старый 10.06.2022, 11:36
Аспирант
Отправить личное сообщение для Дмитрий Луценко Посмотреть профиль Найти все сообщения от Дмитрий Луценко
 
Регистрация: 24.05.2022
Сообщений: 36

Смотрите, Вы селектором перебираете все ноды с классом sfera. У Вас эта переменная sfera хранит массив нод.

Если прям грубый пример-сравнение:
const sfera это как коробка с телефонами. Вам нужно подключить зарядку к выбранному Вами телефону, а Вы втыкаете эту зарядку прямо в коробку.

Значит, надо коробку открыть, взять выбранный Вами телефон и его зарядить.

На идеальность кода не претендую, но ошибки нет. Соответственно этот код поможет Вам доработать Ваш функционал

const sferes = document.querySelectorAll(".sfera");
    sferes.forEach(function(sfera){
	sfera.addEventListener("click", function (event){
	sfera.classList.toggle("vybrano");
	console.log(sfera);
    });
});
Ответить с цитированием
  #4 (permalink)  
Старый 10.06.2022, 11:39
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

voraa,
понял
Ответить с цитированием
  #5 (permalink)  
Старый 10.06.2022, 11:40
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

Дмитрий Луценко,
Спасибо, пример с коробкой хороший
Ответить с цитированием
  #6 (permalink)  
Старый 10.06.2022, 12:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Сергей Ракипов,
<!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>

    const blok = document.querySelector(".nastroika_blok");
    const sfera = Array.from(blok.querySelectorAll(".sfera:nth-child(n + 3)"));

    sfera_vybr = ({target}) => {
        let vse = target.closest(".vse"), sbros = target.closest(".sbros"),
        el = sfera.includes(target);
        if(vse || sbros)sfera.forEach(e => vse ? e.classList.add("vybrano") : e.classList.remove("vybrano"))
        if(el) target.classList.toggle("vybrano");
    }
    blok.addEventListener("click", sfera_vybr);
    </script>
</body>
</html>
Ответить с цитированием
  #7 (permalink)  
Старый 10.06.2022, 12:04
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

По когда страница загружается впервые раз там выделены Выбрать все и все Сфера жизни а Сброс не выделен.

Как сделать что бы когда нажимаешь Сброс выделение у всех пропадает кроме Сброс и кнопка .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>
Ответить с цитированием
  #8 (permalink)  
Старый 10.06.2022, 12:06
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

рони,
Как вы это сделали? вы мысли умеете читать на расстоянии? я писал пост опубликовал а там ответ)
Ответить с цитированием
  #9 (permalink)  
Старый 10.06.2022, 12:15
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

рони,
Просто вот к чему тема, я могу создать как вывести случайные цифры это одна строка.
Но мне вот что нужно.
Когда выбраны Выбрать все то нужно вывести одну тему из все Название темы по сфере... рандомно. А если выбраны конкретные то сферы к примеру Сфера жизни 1 и Сфера жизни 5 то нужно вывести одну из этого блока, рандомно

<!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 {

        }
        .skryt > p {
            display: none;
        }
    </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="skryt 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="skryt 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="skryt 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="skryt 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="skryt 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>

    const blok = document.querySelector(".nastroika_blok");
    const sfera = Array.from(blok.querySelectorAll(".sfera:nth-child(n + 3)"));

    sfera_vybr = ({target}) => {
        let vse = target.closest(".vse"), sbros = target.closest(".sbros"),
        el = sfera.includes(target);
        if(vse || sbros)sfera.forEach(e => vse ? e.classList.add("vybrano") : e.classList.remove("vybrano"))
        if(el) target.classList.toggle("vybrano");
    }
    blok.addEventListener("click", sfera_vybr);
    </script>
</body>
</html>
Ответить с цитированием
  #10 (permalink)  
Старый 10.06.2022, 14:28
Аватар для Белый шум
Профессор
Отправить личное сообщение для Белый шум Посмотреть профиль Найти все сообщения от Белый шум
 
Регистрация: 19.01.2012
Сообщений: 498

Сообщение от Сергей Ракипов Посмотреть сообщение
рони,
Как вы это сделали? вы мысли умеете читать на расстоянии? я писал пост опубликовал а там ответ)
Разница во времени
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите убрать рандом bkmz_ha Javascript под браузер 3 30.03.2016 18:53
Выбор рандом значений с масива Beriagts jQuery 3 13.11.2012 17:24
Как передать сложный массив на сервер vuler jQuery 1 27.03.2012 16:15
Вопрос сложный, для ГУРУ, очень нуждаюсь в Вашей помощи!!! saturn Элементы интерфейса 2 25.09.2011 11:34
Самый сложный вопрос - где взять "австралию" Solovei95 Общие вопросы Javascript 1 24.07.2011 06:08