Коробка, которая отображает случайные divs

Question

Я пытаюсь создать своего рода коробку, которая предполагает отображение случайных div. Например, с забавными фактами о животных. Я нашел некоторый код, написал некоторые самостоятельно и это работает следующим образом: 1. случайный ДИВ загружается при загрузке страницы 2. Следующий случайные дивов загружаются пользователь каждый раз нажмите кнопку: «Случайные забавные факты»

В приведенном ниже коде кнопка «Rundom fun fact» работает только один раз. Как я могу заставить его работать постоянно? Я имею в виду способ, которым я могу щелкнуть по нему 100 раз, и отобразит 100 различных div. И вот мой второй вопрос: при использовании, например, 100 div (есть много забавных фактов о животных), код ниже был бы очень длинным, есть ли более простой способ с каким-то созданием цикла? Есть тонны слайдеров, но я не мог найти ничего подобного. Любая помощь будет оценена по достоинству.

<div id="box"> 
    <div id="funfact1"> 
     <p> 
     Squirrels plant thousands of new trees each year simply by   forgetting where they put their acorns. </p> 
    </div><!-- end funfact1 --> 

    <div id="funfact2"> 
     <p>Macaques in Japan use coins to buy vending machine snacks.  </p> 
    </div><!-- end funfact2 --> 

    <div id="funfact3"> 
     <p>Japanese Macaques make snowballs for fun. </p> 
    </div><!-- end funfact3 --> 

    <div id="funfact4"> 
     <p>Dogs’ nose prints are as unique as human fingerprints and  can be used to identify them. </p> 
    </div><!--end funfact4 --> 
    <div id="buttonDiv"> 
     <button id="buttonShuffle">Random fun fact</button> 
    </div><!-- end buttonDiv --> 
</div><!-- end div box --> 
<script type="text/javascript"> 
randomNumber = Math.floor(Math.random()*4+1); 

window.onload = function() { 
    if (randomNumber == 1) { 
     document.getElementById("funfact1").style.display = "inline"; 
     document.getElementById("funfact2").style.display = "none"; 
     document.getElementById("funfact3").style.display = "none"; 
     document.getElementById("funfact4").style.display = "none"; 
    } 
    if (randomNumber == 2) { 
     document.getElementById("funfact1").style.display = "none"; 
     document.getElementById("funfact2").style.display = "inline"; 
     document.getElementById("funfact3").style.display = "none"; 
     document.getElementById("funfact4").style.display = "none"; 
    } 
    if (randomNumber == 3) { 
     document.getElementById("funfact1").style.display = "none"; 
     document.getElementById("funfact2").style.display = "none"; 
     document.getElementById("funfact3").style.display = "inline"; 
     document.getElementById("funfact4").style.display = "none"; 
    } 
    if (randomNumber == 4) { 
     document.getElementById("funfact1").style.display = "none"; 
     document.getElementById("funfact2").style.display = "none"; 
     document.getElementById("funfact3").style.display = "none"; 
     document.getElementById("funfact4").style.display = "inline"; 
    } 
} 

randomNumber1 = Math.floor(Math.random()*4+1); 
    document.getElementById("buttonShuffle").onclick=function() { 
    if (randomNumber1 == 1) { 
     document.getElementById("funfact1").style.display = "inline"; 
     document.getElementById("funfact2").style.display = "none"; 
     document.getElementById("funfact3").style.display = "none"; 
     document.getElementById("funfact4").style.display = "none"; 
    } 
    if (randomNumber1 == 2) { 
     document.getElementById("funfact1").style.display = "none"; 
     document.getElementById("funfact2").style.display = "inline"; 
     document.getElementById("funfact3").style.display = "none"; 
     document.getElementById("funfact4").style.display = "none"; 
    } 
    if (randomNumber1 == 3) { 
     document.getElementById("funfact1").style.display = "none"; 
     document.getElementById("funfact2").style.display = "none"; 
     document.getElementById("funfact3").style.display = "inline"; 
     document.getElementById("funfact4").style.display = "none"; 
    } 
    if (randomNumber1 == 4) { 
     document.getElementById("funfact1").style.display = "none"; 
     document.getElementById("funfact2").style.display = "none"; 
     document.getElementById("funfact3").style.display = "none"; 
     document.getElementById("funfact4").style.display = "inline"; 
    } 
} 

</script> 

Fiddle

Answer 1

Попробуйте это:

<div id="box"> 
    <p id="funFacts"></p> 
</div><!-- end div box --> 
<script type="text/javascript"> 
    var funFacts = [ 
       'Squirrels plant thousands of new trees each year simply by   forgetting where they put their acorns. ', 
       'Macaques in Japan use coins to buy vending machine snacks.  ' , 
       'Japanese Macaques make snowballs for fun. ' ]; 
    var randomNumber = Math.floor(Math.random() * (funFacts.length-1)); 

    window.onload = function() { 
    document.getElementById('funFact').innerHTML = funFacts[randomNumber]; 
    }; 
    document.getElementById("buttonShuffle").onclick=function() { 
    var randomNumber1 = Math.floor(Math.random() * (funFacts.length-1)); 
    document.getElementById('funFact').innerHTML = funFacts[randomNumber1]; 
} 

</script> 

Какие проблемы вы столкнулись в том, что вы создаете randomNumber1 вне функции, которая выполняется только один раз, а не при каждом вызове buttonShuffle. Следующая проблема, с которой вы столкнулись, заключалась в том, чтобы не написать несколько div, которые вы видите, что я решил использовать массив funfacts.

Answer 2

Если вы хотите сохранить весь свой div и написать менее повторяющийся код, вы можете попробовать это. В общем, когда вы пишете код, попробуйте идентифицировать повторы и экспортировать их в функции.

window.onload = function() { 

    // show random fact on load 
    randomFact() 

    // show random fact on button click 
    document.getElementById("buttonShuffle").addEventListener('click', randomFact) 
} 

function randomFact() { 
    // generate random 
    var random = Math.floor(Math.random() * 4) 

    // get all facts 
    var funfacts = document.getElementsByClassName('funfact') 

    // hide all facts 
    for (var i = 0; i < funfacts.length; i++) { 
    funfacts[i].style.display = 'none' 
    } 

    // show one 
    funfacts[random].style.display = 'inline' 
} 

https://jsfiddle.net/kxv7y6x9/

Answer 3

Это позволит устранить проблему,

И если вы хотите, чтобы динамический посты рассчитывать вы можете сделать что-то вроде этого,

HTML,

<div id="box"> 

    <div class="text"> 
     <p>Squirrels plant thousands of new trees each year simply by forgetting where they put their acorns</p> 
    </div><!-- end funfact1 --> 

    <div class="text"> 
     <p>Macaques in Japan use coins to buy vending machine snacks.</p> 
    </div><!-- end funfact2 --> 

    <div class="text"> 
     <p>Japanese Macaques make snowballs for fun.</p> 
    </div><!-- end funfact3 --> 

    <div class="text"> 
     <p>Dogs’ nose prints are as unique as human fingerprints and can be used to identify them. </p> 
    </div><!--end funfact4 --> 

    <div id="buttonDiv"> 
     <button id="buttonShuffle">Random fun fact</button> 
    </div><!-- end buttonDiv --> 

</div><!-- end div box --> 

Javascript,

var texts = document.getElementsByClassName('text'), 
    randomNumber; 

function updateNumber(){ 
    randomNumber = (Math.floor((Math.random() * texts.length) + 1)) - 1; 
} 

function updateText(){ 
    updateNumber(); 
    for (i = 0; i < texts.length; i++) { 
     texts[i].style.display = "none"; 
    } 
    texts[randomNumber].style.display = "block"; 
} 

window.onload = function(){ 
    updateText(); 
} 

document.getElementById('buttonShuffle').onclick = function(){ 
    updateText(); 
} 

CSS,

#box { 
    width: 350px; 
    height: 250px; 
    border: solid thin blue; 
    padding: 10px; 
    position: relative; 
} 
#buttonDiv { 
    position: absolute; 
    bottom: 10px; 
    left: 120px; 

} 

Смотрите пример: https://jsfiddle.net/xbouf1o2/21/

Answer 4

В коде ниже кнопки "Случайные забавные факты" работает только один раз. Как я могу заставить его работать непрерывно?

Причина этого в том, что переменная randomNumber1 рассчитывается один раз. Вам нужно рассчитать случайное число в событии onclick. Таким образом, каждый раз, когда вы нажимаете кнопку, генерируется случайное число, и отображается связанный с ним факт забавы.

При использовании, например, 100 divs (есть много интересных фактов о животных), код ниже будет очень длинным, есть ли более простой способ с каким-то> созданием цикла?

Во-первых, вам нужно удалить идентификатор из каждого забавного факта и вместо этого добавить класс. Теперь вы можете использовать JS, чтобы захватить все интересные факты, используя document.getElementsByClassName(class). Это вернет нодлист, который мы можем пропустить.

Во-вторых, создайте функцию, которая сделает перетасовку для вас.

function shuffleRandomFunfact(event) { 
    // Generate a random number. 
    var randomNumber = Math.floor(Math.random() * 4); 
    // Loop through the nodelist. 
    for (var i = 0; i < funfacts.length; i++) { 
    // If the index of the current funfact is the same 
    // as the random number. 
    if (i === randomNumber) 
     funfacts[i].style.display = 'inline'; 
    // Otherwise ... 
    funfacts[i].style.display = 'none'; 
    } 
} 

Теперь вам просто нужно прикрепить вышеуказанную функцию к слушателям событий.

Fiddle