Рандомное появление блоков при клике

334

28 февраля 2017, 17:39

Всем привет! Я только в начале изучения js))) Поэтому такой вопрос: Есть 5 скрытых блоков (display: none) и кнопка с прицепленным к ней событием. Суть вопроса: при нажатии на кнопку включается рандомный счетчик от 0 до 5. И в зависимости от выпавшего числа блоку с соотв. id присваиется стиль display: block. Т.е. он появляется. Подскажите как сделать, чтобы при повторном нажатии кнопки видимый блок скрывался или появлялся заново, если выпало число, соответствующее его id? Код html:

<div class="container" id="randCont">
      <button id="randing" onclick="rand()">Узнать судьбу</button>
      <div id="one">
        <h1>Первый</h1>
        <p>Первый текст</p>
      </div>
      <div id="two">
        <h1>Второй</h1>
        <p>Второй текст</p>
      </div>
      <div id="three">
        <h1>Третий</h1>
        <p>Третий текст</p>
      </div>
      <div id="four">
        <h1>Четвертый</h1>
        <p>Четвертый текст</p>
      </div>
      <div id="five">
        <h1>Пятый</h1>
        <p>Пятый текст</p>
      </div>
    </div>

Код js:

var doc, total, div_R, btn;
doc = document;
div_R = doc.querySelector("#randCont div");
btn = doc.getElementById('randing');
function rand() {

    total = Math.round(Math.random() * 5);
    switch (total) {
        case 1:
            doc.getElementById('one').style.display = 'block';
            break
        case 2:
            doc.getElementById('two').style.display = 'block';
            break
        case 3:
            doc.getElementById('three').style.display = 'block';
            break
        case 4:
            doc.getElementById('four').style.display = 'block';
            break
        case 5:
            doc.getElementById('five').style.display = 'block';
            break
    };
    doc.getElementById('randing').innerText = "Попробовать ещё";

};

Answer 1

Можно пометить все блоки результата некоторым классом, скрыть их по умолчанию, а при нажатии на кнопку добавить другой класс одному из блоков, чтобы показать.

var variants = Array.from(document.querySelectorAll('.res')); 
function rand() { 
 var index = Math.floor(Math.random()*variants.length); 
 variants.forEach(div => div.classList.remove('visible')); 
 variants[index].classList.add('visible'); 
}

.res {display: none;} 
.res.visible {display: block;}

<div class="container" id="randCont"> 
  <button id="randing" onclick="rand()">Узнать судьбу</button> 
  <div class="res"> 
    <h1>Первый</h1> 
    <p>Первый текст</p> 
  </div> 
  <div class="res"> 
    <h1>Второй</h1> 
    <p>Второй текст</p> 
  </div> 
  <div class="res"> 
    <h1>Третий</h1> 
    <p>Третий текст</p> 
  </div> 
  <div class="res"> 
    <h1>Четвертый</h1> 
    <p>Четвертый текст</p> 
  </div> 
  <div  class="res"> 
    <h1>Пятый</h1> 
    <p>Пятый текст</p> 
  </div> 
</div>

В IE отсутствует метод Array.from, поэтому нужно использовать полифиллы либо изменить код на более совместимый:

var variants = document.querySelectorAll('.res'); 
function rand() { 
 var index = Math.floor(Math.random()*variants.length); 
 for (var i = 0; i < variants.length; ++i) { 
   var div = variants[i]; 
   if (i === index) { 
    div.classList.add('visible'); 
   } else { 
    div.classList.remove('visible'); 
   } 
 } 
}

.res {display: none;} 
.res.visible {display: block;}

<div class="container" id="randCont"> 
  <button id="randing" onclick="rand()">Узнать судьбу</button> 
  <div class="res"> 
    <h1>Первый</h1> 
    <p>Первый текст</p> 
  </div> 
  <div class="res"> 
    <h1>Второй</h1> 
    <p>Второй текст</p> 
  </div> 
  <div class="res"> 
    <h1>Третий</h1> 
    <p>Третий текст</p> 
  </div> 
  <div class="res"> 
    <h1>Четвертый</h1> 
    <p>Четвертый текст</p> 
  </div> 
  <div  class="res"> 
    <h1>Пятый</h1> 
    <p>Пятый текст</p> 
  </div> 
</div>

Answer 2

Все блоки должны иметь кроме id, еще и класс - один для всех. И по нажатию на кнопку надо проверять - если блок видимый, то скрывать весь класс (все блоки сразу будут скрыты). А показывать потом один тот (через его id), на который указал перст судьбы)

Answer 3

var doc, total, div_R, btn, da, conts; 
doc = document; 
conts = doc.querySelectorAll('div > div'); 
div_R = doc.querySelector("#randCont div"); 
btn = doc.getElementById('randing'); 
 
function rand() { 
		 
    total = Math.round(Math.random() * 5); 
     
    conts.forEach(function(item){ 
    var foo = window.getComputedStyle(item).display; 
		if (foo === 'block'){ 
    item.style.display = 'none'; 
    } 
		}); 
     
    switch (total) { 
        case 1: 
            doc.getElementById('one').style.display = 'block'; 
            break 
        case 2: 
            doc.getElementById('two').style.display = 'block'; 
            break 
        case 3: 
            doc.getElementById('three').style.display = 'block'; 
            break 
        case 4: 
            doc.getElementById('four').style.display = 'block'; 
            break 
        case 5: 
            doc.getElementById('five').style.display = 'block'; 
            break 
    }; 
 
    doc.getElementById('randing').innerText = "Попробовать ещё"; 
 
 
};

.container div{ 
  display:none; 
}

<div class="container" id="randCont"> 
      <button id="randing" onclick="rand()">Узнать судьбу</button> 
      <div id="one"> 
        <h1>Первый</h1> 
        <p>Первый текст</p> 
      </div> 
      <div id="two"> 
        <h1>Второй</h1> 
        <p>Второй текст</p> 
      </div> 
      <div id="three"> 
        <h1>Третий</h1> 
        <p>Третий текст</p> 
      </div> 
      <div id="four"> 
        <h1>Четвертый</h1> 
        <p>Четвертый текст</p> 
      </div> 
      <div id="five"> 
        <h1>Пятый</h1> 
        <p>Пятый текст</p> 
      </div> 
    </div>