Сложный рандом
Я пробую сам написать, и пока до этого сложного рандома еще не дошел столкнулся с небольшой проблемой.
У меня скрипт который должен перебрать все элементы с .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>
|
const sfera = document.querySelectorAll(".sfera");
Обратите внимание на All. All - значит все. Это же не один элемент, их много. А раз их много, то нельзя делать sfera.addEventListener("click", sfera_vybr); addEventListener можно применять к 1 элементу, а не к массиву или списку. Надо sfera пройти в цикле и к каждому элементу задать обработчик событий. Так же нельзя делать sfera.classList.toggle("vybrano"); .classList - это свойство элемента, а не списка. PS Вы же уже давно пишете какие то программы. Почему Вы до сих пор не пользуетесь инструментами разработчика? Не смотрите в консоль. Там же все ошибки написаны обычно. |
Смотрите, Вы селектором перебираете все ноды с классом 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);
});
});
|
voraa,
понял |
Дмитрий Луценко,
Спасибо, пример с коробкой хороший |
Сергей Ракипов,
<!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>
|
По когда страница загружается впервые раз там выделены Выбрать все и все Сфера жизни а Сброс не выделен.
Как сделать что бы когда нажимаешь Сброс выделение у всех пропадает кроме Сброс и кнопка .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>
|
рони,
Как вы это сделали? вы мысли умеете читать на расстоянии? я писал пост опубликовал а там ответ) |
рони,
Просто вот к чему тема, я могу создать как вывести случайные цифры это одна строка. Но мне вот что нужно. Когда выбраны Выбрать все то нужно вывести одну тему из все Название темы по сфере... рандомно. А если выбраны конкретные то сферы к примеру Сфера жизни 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>
|
Цитата:
|
вопросник случайный выбор
Сергей Ракипов,
<!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;
}
/* настройки */
.parameters .active {
color: #FF0000;
}
.parameters {
cursor: pointer;
}
/* тема */
.partition {
border: 1px solid #0e9fff;
text-align: center;
border-radius: 8px;
}
.partition>p,
.partition {
display: none;
}
.partition>p.active,
.partition.active {
display: block;
}
/* кнопка выбора темы */
.button_random {
display: flex;
justify-content: center;
align-items: center;
width: 280px;
height: 70px;
border: 1px solid #0e9fff;
color: #0e9fff;
cursor: pointer;
}
.button_random.active {
border-color: #008000;
}
.button_random:hover {
border: 1px solid blueviolet;
color: blueviolet;
}
.button_random:after {
content: "НУЖНО Выбрать хоть одну сферу"
}
.button_random.active:after {
content: "Случайная тема"
}
</style>
</head>
<body>
<main>
<div class="control">
<div class="parameters">
<div class="all">Выбрать все</div>
<div class="reset active">Сброс</div>
<div class="sfera">Сфера жизни 1</div>
<div class="sfera">Сфера жизни 2</div>
<div class="sfera">Сфера жизни 3</div>
<div class="sfera">Сфера жизни 4</div>
<div class="sfera">Сфера жизни 5</div>
</div>
</div>
<div class="sections">
<div class="partition">
<p>Название темы по сфере 1 Вопрос №1</p>
<p>Название темы по сфере 1 Вопрос №2</p>
<p>Название темы по сфере 1 Вопрос №3</p>
<p>Название темы по сфере 1 Вопрос №4</p>
<p>Название темы по сфере 1 Вопрос №5</p>
</div>
<div class="partition">
<p>Название темы по сфере 2 Вопрос №2</p>
<p>Название темы по сфере 2 Вопрос №3</p>
<p>Название темы по сфере 2 Вопрос №1</p>
<p>Название темы по сфере 2 Вопрос №4</p>
<p>Название темы по сфере 2 Вопрос №5</p>
</div>
<div class="partition">
<p>Название темы по сфере 3 Вопрос №1</p>
<p>Название темы по сфере 3 Вопрос №2</p>
<p>Название темы по сфере 3 Вопрос №3</p>
<p>Название темы по сфере 3 Вопрос №4</p>
<p>Название темы по сфере 3 Вопрос №5</p>
</div>
<div class="partition">
<p>Название темы по сфере 4 Вопрос №1</p>
<p>Название темы по сфере 4 Вопрос №2</p>
<p>Название темы по сфере 4 Вопрос №3</p>
<p>Название темы по сфере 4 Вопрос №4</p>
<p>Название темы по сфере 4 Вопрос №5</p>
</div>
<div class="partition">
<p>Название темы по сфере 5 Вопрос №1</p>
<p>Название темы по сфере 5 Вопрос №2</p>
<p>Название темы по сфере 5 Вопрос №3</p>
<p>Название темы по сфере 5 Вопрос №4</p>
<p>Название темы по сфере 5 Вопрос №5</p>
</div>
</div>
<div class="title_random">
<div class="button_random">
</div>
</div>
<div class="title_time">
Сколько времени осталось
</div>
</main>
<script>
const parameter = document.querySelector(".parameters");
const buttons = Array.from(parameter.querySelectorAll(".sfera"));
const reset = parameter.querySelector(".reset");
const all = parameter.querySelector(".all");
const random = document.querySelector(".button_random");
const sections = Array.from(document.querySelectorAll(".partition"));
const select = ({ target }) => {
let method = "";
if (target == reset) method = "remove";
if (target == all) method = "add";
if (method) buttons.forEach(button => button.classList[method]("active"))
if (buttons.includes(target)) target.classList.toggle("active");
let len = parameter.querySelectorAll(".sfera.active").length;
all.classList.toggle("active", len == buttons.length);
reset.classList.toggle("active", !len);
random.classList.toggle("active", len);
random_title(true);
}
const random_title = (reset) => {
let arr = [];
buttons.forEach((button, i) => {
const active = button.classList.contains("active");
const section = sections[i];
section.classList.remove("active");
const items = sections[i].querySelectorAll("p");
items.forEach((item, i) => item.classList.remove("active"));
const k = Math.trunc(Math.random() * items.length);
const item = items[k]
if(active) arr.push({section, item});
})
if(!reset){
const j = Math.trunc(Math.random() * arr.length);
const {section, item} = arr[j];
item.classList.add("active");
section.classList.add("active");
}
}
parameter.addEventListener("click", select);
random.addEventListener("click", ()=> {
let active = random.classList.contains("active");
if (!active) return;
random_title();
});
</script>
</body>
</html>
|
рони,
Я почему тему назвал сложного рандома, так как нужно сделать когда человек выбирает примеру из 1 и 3 сферы ему выдается только ОДНИ вопрос то есть из этих сфер не два вопроса, а ОДНА, случайно. И соответственно когда выбраны все сферы нужно из всех выбрать один случайны вопрос, а не 5. Особенность в том что сфер может быть и 10 и 3, а в каждой сфере может быть и 2 вопроса и 200 вопросов. Но как я посмотрел код вроде он с этим справиться легко. И еще можно что бы выбранные сферы .sfera .reset .all записывались localStorage, то есть человек зашел сегодня выбрал сферы к примеру 2 и 4 , нажал ему случайно дали вопрос и когда завтра зашел ему не нужно будет снова выбирать эти сферы 2 и 4. И еще когда высвечивается надпись НУЖНО Выбрать хоть одну сферу, нужно, что бы кнопка была не кликабельна. Но это просто пожелание, так как там задумка в том что когда человек нажал на кнопку ему на 5 секунд заблокировали кнопку выбора темы и внизу таймер из 5 секунд. .title_time Это нужно для того что бы он как сумасшедший не перебирал темы. |
Сергей Ракипов,
обновите страницу, и далее сами. |
рони,
Спасибо, да хорошо, я буду пробовать, как раз завтра выходные |
Цитата:
<!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;
}
/* настройки */
.parameters .active {
color: #FF0000;
}
.parameters {
cursor: pointer;
}
/* тема */
.partition {
border: 1px solid #0e9fff;
text-align: center;
border-radius: 8px;
}
.partition>p,
.partition {
display: none;
}
.partition>p.active,
.partition.active {
display: block;
}
/* кнопка выбора темы */
.button_random {
display: flex;
justify-content: center;
align-items: center;
width: 280px;
height: 70px;
border: 1px solid #0e9fff;
color: #0e9fff;
cursor: pointer;
}
.button_random.active {
border-color: #008000;
}
.button_random:hover {
border: 1px solid blueviolet;
color: blueviolet;
}
.button_random:after {
content: "НУЖНО Выбрать хоть одну сферу";
}
.button_random.active:after {
content: "Случайная тема";
}
.button_random.disabled:after {
content: attr(data-time)"s";
}
</style>
</head>
<body>
<main>
<div class="control">
<div class="parameters">
<div class="all">Выбрать все</div>
<div class="reset active">Сброс</div>
<div class="sfera">Сфера жизни 1</div>
<div class="sfera">Сфера жизни 2</div>
<div class="sfera">Сфера жизни 3</div>
<div class="sfera">Сфера жизни 4</div>
<div class="sfera">Сфера жизни 5</div>
</div>
</div>
<div class="sections">
<div class="partition">
<p>Название темы по сфере 1 Вопрос №1</p>
<p>Название темы по сфере 1 Вопрос №2</p>
<p>Название темы по сфере 1 Вопрос №3</p>
<p>Название темы по сфере 1 Вопрос №4</p>
<p>Название темы по сфере 1 Вопрос №5</p>
</div>
<div class="partition">
<p>Название темы по сфере 2 Вопрос №2</p>
<p>Название темы по сфере 2 Вопрос №3</p>
<p>Название темы по сфере 2 Вопрос №1</p>
<p>Название темы по сфере 2 Вопрос №4</p>
<p>Название темы по сфере 2 Вопрос №5</p>
</div>
<div class="partition">
<p>Название темы по сфере 3 Вопрос №1</p>
<p>Название темы по сфере 3 Вопрос №2</p>
<p>Название темы по сфере 3 Вопрос №3</p>
<p>Название темы по сфере 3 Вопрос №4</p>
<p>Название темы по сфере 3 Вопрос №5</p>
</div>
<div class="partition">
<p>Название темы по сфере 4 Вопрос №1</p>
<p>Название темы по сфере 4 Вопрос №2</p>
<p>Название темы по сфере 4 Вопрос №3</p>
<p>Название темы по сфере 4 Вопрос №4</p>
<p>Название темы по сфере 4 Вопрос №5</p>
</div>
<div class="partition">
<p>Название темы по сфере 5 Вопрос №1</p>
<p>Название темы по сфере 5 Вопрос №2</p>
<p>Название темы по сфере 5 Вопрос №3</p>
<p>Название темы по сфере 5 Вопрос №4</p>
<p>Название темы по сфере 5 Вопрос №5</p>
</div>
</div>
<div class="title_random" >
<div class="button_random">
</div>
</div>
</main>
<script>
const parameter = document.querySelector(".parameters");
const buttons = Array.from(parameter.querySelectorAll(".sfera"));
const reset = parameter.querySelector(".reset");
const all = parameter.querySelector(".all");
const random = document.querySelector(".button_random");
const sections = Array.from(document.querySelectorAll(".partition"));
const duration = 10000;
let timer, beginTime;
const loop = time => {
const end = time - beginTime ;
if(end >= duration) {
random.classList.add("active");
random.classList.remove("disabled");
}
else {
random.dataset.time = Math.trunc((duration - end)/1000);
timer = requestAnimationFrame(loop);
}
}
const select = ({ target }) => {
let method = "";
if (target == reset) method = "remove";
if (target == all) method = "add";
if (method) buttons.forEach(button => button.classList[method]("active"))
if (buttons.includes(target)) target.classList.toggle("active");
let len = parameter.querySelectorAll(".sfera.active").length;
all.classList.toggle("active", len == buttons.length);
reset.classList.toggle("active", !len);
random.classList.toggle("active", len);
random.classList.remove("disabled");
random_title(true);
}
const random_title = (reset) => {
cancelAnimationFrame(timer);
let arr = [];
buttons.forEach((button, i) => {
const active = button.classList.contains("active");
const section = sections[i];
section.classList.remove("active");
const items = sections[i].querySelectorAll("p");
items.forEach((item, i) => item.classList.remove("active"));
const k = Math.trunc(Math.random() * items.length);
const item = items[k];
if(active) arr.push({i, item});
})
let arr_section = arr.map(({i}) => i);
arr_section = JSON.stringify(arr_section);
localStorage.setItem("arr_section", arr_section);
if(!reset){
const j = Math.trunc(Math.random() * arr.length);
const {i, item} = arr[j];
item.classList.add("active");
sections[i].classList.add("active");
random.classList.remove("active");
random.classList.add("disabled");
beginTime = performance.now();
timer = requestAnimationFrame(loop);
}
}
let arr_section = localStorage.getItem("arr_section") || "[]";
arr_section = JSON.parse(arr_section);
arr_section.forEach(i => buttons[i].classList.add("active"));
select({ target : null});
parameter.addEventListener("click", select);
random.addEventListener("click", ()=> {
let active = random.classList.contains("active");
if (!active) return;
random_title();
});
</script>
</body>
</html>
|
рони,
:) спасибо с не кликабельностью кнопки я решил проблему это не сложно было в css |
Цитата:
Цитата:
|
А вот сделал визуально кнопку не кликабельной во время таймера. А можно сделать еще что бы и .parameters > div тоже были не кликабельны ну значок cursor: not-allowed;
Я пробовал вот тут это как то сделать
const loop = time => {
const end = time - beginTime;
if ( end >= duration ) {
random.classList.add( "active" );
random.classList.remove( "disabled" );
} else {
random.dataset.time = Math.trunc( ( duration - end ) / 1000 );
timer = requestAnimationFrame( loop );
}
}
Но либо я синтекс не правильно писал либо вообще не туда
<!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;
}
/* настройки */
.parameters .active {
color: #FF0000;
}
.parameters {
cursor: pointer;
}
.parameters > div {
margin: 20px 0px 20px 0px;
}
/* тема */
.partition {
border: 1px solid #0e9fff;
text-align: center;
border-radius: 8px;
}
.partition>p,
.partition {
display: none;
}
.partition>p.active,
.partition.active {
display: block;
}
/* кнопка выбора темы */
.button_random {
display: flex;
justify-content: center;
align-items: center;
width: 280px;
height: 70px;
border: 1px solid #0e9fff;
color: #0e9fff;
cursor: pointer;
}
.button_random.active {
border: 1px solid #0e9fff;
border-color: #008000;
}
.button_random:hover {
color: blueviolet;
}
.button_random:after {
display: flex;
justify-content: center;
align-items: center;
content: "НУЖНО Выбрать хоть одну сферу";
background-color: #fff;
border: 1px solid #0e9fff;
width: 280px;
height: 70px;
cursor: not-allowed;
}
.button_random:hover::after {
display: flex;
justify-content: center;
align-items: center;
content: "НУЖНО Выбрать хоть одну сферу";
background-color: #fff;
width: 280px;
height: 70px;
cursor: not-allowed;
border: 1px solid #0e9fff;
color: #0e9fff;
}
.button_random.active:after {
content: "Случайная тема";
cursor: pointer;
}
.button_random.disabled:after {
content:"Нужно подождать " attr(data-time) " секунд";
}
</style>
</head>
<body>
<main>
<div class="control">
<div class="parameters">
<div class="all">Выбрать все</div>
<div class="reset active">Сброс</div>
<div class="sfera">Сфера жизни 1</div>
<div class="sfera">Сфера жизни 2</div>
<div class="sfera">Сфера жизни 3</div>
<div class="sfera">Сфера жизни 4</div>
<div class="sfera">Сфера жизни 5</div>
</div>
</div>
<div class="sections">
<div class="partition">
<p>Название темы по сфере 1 Вопрос №1</p>
<p>Название темы по сфере 1 Вопрос №2</p>
<p>Название темы по сфере 1 Вопрос №3</p>
<p>Название темы по сфере 1 Вопрос №4</p>
<p>Название темы по сфере 1 Вопрос №5</p>
</div>
<div class="partition">
<p>Название темы по сфере 2 Вопрос №2</p>
<p>Название темы по сфере 2 Вопрос №3</p>
<p>Название темы по сфере 2 Вопрос №1</p>
<p>Название темы по сфере 2 Вопрос №4</p>
<p>Название темы по сфере 2 Вопрос №5</p>
</div>
<div class="partition">
<p>Название темы по сфере 3 Вопрос №1</p>
<p>Название темы по сфере 3 Вопрос №2</p>
<p>Название темы по сфере 3 Вопрос №3</p>
<p>Название темы по сфере 3 Вопрос №4</p>
<p>Название темы по сфере 3 Вопрос №5</p>
</div>
<div class="partition">
<p>Название темы по сфере 4 Вопрос №1</p>
<p>Название темы по сфере 4 Вопрос №2</p>
<p>Название темы по сфере 4 Вопрос №3</p>
<p>Название темы по сфере 4 Вопрос №4</p>
<p>Название темы по сфере 4 Вопрос №5</p>
</div>
<div class="partition">
<p>Название темы по сфере 5 Вопрос №1</p>
<p>Название темы по сфере 5 Вопрос №2</p>
<p>Название темы по сфере 5 Вопрос №3</p>
<p>Название темы по сфере 5 Вопрос №4</p>
<p>Название темы по сфере 5 Вопрос №5</p>
</div>
</div>
<div class="title_random">
<div class="button_random">
</div>
</div>
</main>
<script>
const parameter = document.querySelector( ".parameters" );
const buttons = Array.from( parameter.querySelectorAll( ".sfera" ) );
const reset = parameter.querySelector( ".reset" );
const all = parameter.querySelector( ".all" );
const random = document.querySelector( ".button_random" );
const sections = Array.from( document.querySelectorAll( ".partition" ) );
const duration = 4000;
let timer, beginTime;
const loop = time => {
const end = time - beginTime;
if ( end >= duration ) {
random.classList.add( "active" );
random.classList.remove( "disabled" );
} else {
random.dataset.time = Math.trunc( ( duration - end ) / 1000 );
timer = requestAnimationFrame( loop );
}
}
const select = ( {
target
} ) => {
let method = "";
if ( target == reset ) method = "remove";
if ( target == all ) method = "add";
if ( method ) buttons.forEach( button => button.classList[ method ]( "active" ) )
if ( buttons.includes( target ) ) target.classList.toggle( "active" );
let len = parameter.querySelectorAll( ".sfera.active" ).length;
all.classList.toggle( "active", len == buttons.length );
reset.classList.toggle( "active", !len );
random.classList.toggle( "active", len );
random.classList.remove( "disabled" );
random_title( true );
}
const random_title = ( reset ) => {
cancelAnimationFrame( timer );
let arr = [];
buttons.forEach( ( button, i ) => {
const active = button.classList.contains( "active" );
const section = sections[ i ];
section.classList.remove( "active" );
const items = sections[ i ].querySelectorAll( "p" );
items.forEach( ( item, i ) => item.classList.remove( "active" ) );
const k = Math.trunc( Math.random() * items.length );
const item = items[ k ];
if ( active ) arr.push( {
i,
item
} );
} )
let arr_section = arr.map( ( {
i
} ) => i );
arr_section = JSON.stringify( arr_section );
localStorage.setItem( "arr_section", arr_section );
if ( !reset ) {
const j = Math.trunc( Math.random() * arr.length );
const {
i,
item
} = arr[ j ];
item.classList.add( "active" );
sections[ i ].classList.add( "active" );
random.classList.remove( "active" );
random.classList.add( "disabled" );
beginTime = performance.now();
timer = requestAnimationFrame( loop );
}
}
let arr_section = localStorage.getItem( "arr_section" ) || "[]";
arr_section = JSON.parse( arr_section );
arr_section.forEach( i => buttons[ i ].classList.add( "active" ) );
select( {
target: null
} );
parameter.addEventListener( "click", select );
random.addEventListener( "click", () => {
let active = random.classList.contains( "active" );
if ( !active ) return;
random_title();
} );
</script>
</body>
</html>
|
Цитата:
|
Просто по факту таймер сбрасывает нажатие .parameters > div
|
Цитата:
<!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;
}
/* настройки */
.parameters .active {
color: #FF0000;
}
.parameters {
cursor: pointer;
}
/* тема */
.partition {
border: 1px solid #0e9fff;
text-align: center;
border-radius: 8px;
}
.partition>p,
.partition {
display: none;
}
.partition>p.active,
.partition.active {
display: block;
}
/* кнопка выбора темы */
.button_random {
display: flex;
justify-content: center;
align-items: center;
width: 280px;
height: 70px;
border: 1px solid #0e9fff;
color: #0e9fff;
cursor: pointer;
}
.button_random.active {
border-color: #008000;
}
.button_random:hover {
border: 1px solid blueviolet;
color: blueviolet;
}
.button_random:after {
content: "НУЖНО Выбрать хоть одну сферу";
}
.button_random.active:after {
content: "Случайная тема";
}
.button_random.disabled:after {
content: attr(data-time)"s";
}
</style>
</head>
<body>
<main>
<div class="control">
<div class="parameters">
<div class="all">Выбрать все</div>
<div class="reset active">Сброс</div>
<div class="sfera">Сфера жизни 1</div>
<div class="sfera">Сфера жизни 2</div>
<div class="sfera">Сфера жизни 3</div>
<div class="sfera">Сфера жизни 4</div>
<div class="sfera">Сфера жизни 5</div>
</div>
</div>
<div class="sections">
<div class="partition">
<p>Название темы по сфере 1 Вопрос №1</p>
<p>Название темы по сфере 1 Вопрос №2</p>
<p>Название темы по сфере 1 Вопрос №3</p>
<p>Название темы по сфере 1 Вопрос №4</p>
<p>Название темы по сфере 1 Вопрос №5</p>
</div>
<div class="partition">
<p>Название темы по сфере 2 Вопрос №2</p>
<p>Название темы по сфере 2 Вопрос №3</p>
<p>Название темы по сфере 2 Вопрос №1</p>
<p>Название темы по сфере 2 Вопрос №4</p>
<p>Название темы по сфере 2 Вопрос №5</p>
</div>
<div class="partition">
<p>Название темы по сфере 3 Вопрос №1</p>
<p>Название темы по сфере 3 Вопрос №2</p>
<p>Название темы по сфере 3 Вопрос №3</p>
<p>Название темы по сфере 3 Вопрос №4</p>
<p>Название темы по сфере 3 Вопрос №5</p>
</div>
<div class="partition">
<p>Название темы по сфере 4 Вопрос №1</p>
<p>Название темы по сфере 4 Вопрос №2</p>
<p>Название темы по сфере 4 Вопрос №3</p>
<p>Название темы по сфере 4 Вопрос №4</p>
<p>Название темы по сфере 4 Вопрос №5</p>
</div>
<div class="partition">
<p>Название темы по сфере 5 Вопрос №1</p>
<p>Название темы по сфере 5 Вопрос №2</p>
<p>Название темы по сфере 5 Вопрос №3</p>
<p>Название темы по сфере 5 Вопрос №4</p>
<p>Название темы по сфере 5 Вопрос №5</p>
</div>
</div>
<div class="title_random" >
<div class="button_random">
</div>
</div>
</main>
<script>
const parameter = document.querySelector(".parameters");
const buttons = Array.from(parameter.querySelectorAll(".sfera"));
const reset = parameter.querySelector(".reset");
const all = parameter.querySelector(".all");
const random = document.querySelector(".button_random");
const sections = Array.from(document.querySelectorAll(".partition"));
const duration = 10000;
let timer, beginTime;
const loop = time => {
const end = time - beginTime ;
if(end >= duration) {
random.classList.add("active");
random.classList.remove("disabled");
}
else {
random.dataset.time = Math.trunc((duration - end)/1000);
timer = requestAnimationFrame(loop);
}
}
const select = ({ target }) => {
let disabled = random.classList.contains("disabled");
if (disabled && target) return;
let method = "";
if (target == reset) method = "remove";
if (target == all) method = "add";
if (method) buttons.forEach(button => button.classList[method]("active"))
if (buttons.includes(target)) target.classList.toggle("active");
let len = parameter.querySelectorAll(".sfera.active").length;
all.classList.toggle("active", len == buttons.length);
reset.classList.toggle("active", !len);
random.classList.toggle("active", len);
random.classList.remove("disabled");
random_title(true);
}
const random_title = (reset) => {
cancelAnimationFrame(timer);
let arr = [];
buttons.forEach((button, i) => {
const active = button.classList.contains("active");
const section = sections[i];
section.classList.remove("active");
const items = sections[i].querySelectorAll("p");
items.forEach((item, i) => item.classList.remove("active"));
const k = Math.trunc(Math.random() * items.length);
const item = items[k];
if(active) arr.push({i, item});
})
let arr_section = arr.map(({i}) => i);
arr_section = JSON.stringify(arr_section);
localStorage.setItem("arr_section", arr_section);
if(!reset){
const j = Math.trunc(Math.random() * arr.length);
const {i, item} = arr[j];
item.classList.add("active");
sections[i].classList.add("active");
random.classList.remove("active");
random.classList.add("disabled");
beginTime = performance.now();
timer = requestAnimationFrame(loop);
}
}
let arr_section = localStorage.getItem("arr_section") || "[]";
arr_section = JSON.parse(arr_section);
arr_section.forEach(i => buttons[i].classList.add("active"));
select({ target : null});
parameter.addEventListener("click", select);
random.addEventListener("click", ()=> {
let active = random.classList.contains("active");
if (!active) return;
random_title();
});
</script>
</body>
</html>
|
рони,
Как всегда идеально! спасибо |
| Часовой пояс GMT +3, время: 20:49. |