Как в мобильной версии сделать рандомный показ 1 блока из 3?

Question

[Darkness]

С JS и PhP слишком мало еще знаком, поэтому прошу помощи!

Вот есть media ,например, до 414px , и нужно чтобы при обновлении сайта на моб. такого разрешения cменялся блок. Т.е показывался один из 3, и так рандомно.

Буду очень благодарен!

Answer 1

[Andrew]

Даёте всем трём блокам display:none;

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}
let randomItem = Math.ceil(getRandomArbitrary(0,3));
if(window.innerWidth<414){
document.getElementsByClassName('any-class')[randomItem].style.display="block";
}

Comments

[Darkness]

Извини ошибся, до 414 px. Прописал везде none. А в код JS разве ничего больше добавлять не нужно?

[Darkness]

Andrew И ты вот написал your-block-class , но их же 3 ) или контейнер вписать где содержаться блоки с none?

[Darkness]

Да и в любом случае , чтобы я туда не вписал , не становится видным. ( Измменил в коде <414 на >414)

[Andrew]

Антон Добрынин, всем трём дайте один любой класс
вот так

<div class="any-class"></div>
<div class="any-class"></div>
<div class="any-class"></div>

@media only screen and (max-width: 414px) {
   .any-class{
display:none;
}
}

[Darkness]

Andrew, сделал сразу так) Все скрывается и все норм , в твою функцию прописал .any-class (тут мой класс) , но они как были none , так и остаются none :c

[Andrew]

Антон Добрынин, исправил ответ.
В названии класса поставил не тот класс