Hello! I am only at the beginning of the study of js))) Therefore, this question: There are 5 hidden blocks (display: none) and a button with an event attached to it. The crux of the matter: when you press a button, a random counter from 0 to 5 is turned on. And depending on the number dropped out, the block with resp. id is assigned the display: block style. Those. he appears. Tell me how to make, so that when you press the button again, the visible block hides or reappears if the number corresponding to its id appears. Html code:

<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 code:

 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 = "Попробовать ещё"; };
  • As an option , the script turned out more compact. Thanks @Crantisz - Gargool

3 answers 3

You can mark all result blocks with a certain class, hide them by default, and when you click on the button, add another class to one of the blocks to show.

 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 not have the Array.from method, so you need to use polyfills or change the code to a more compatible one:

 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>

  • one
    It works!))) Thank you !! - Pavel Polishchuk
  • Strange. On the local works. Added on a site, writes: TypeError: variants [index] is undefined. How to be? - Pavel Polishchuk
  • Check how you count the index, whether variants are visible, and whether the necessary class is in blocks. - vp_arth

All blocks must have except id, also a class - one for all. And by pressing the button you need to check - if the block is visible, then hide the entire class (all blocks will be hidden at once). And then show that one (through his id), which pointed finger of fate)

     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>