lundi 29 août 2016

Box that displays random divs

I am trying to create a kind of box which suppose to display random divs. For example with fun facts about animals. I found some code, wrote some on my own and it works this way: 1. random div is loaded when page is loading 2. next random divs are loaded everytime user click the button: "Random fun facts"

In the code below the button "Rundom fun facts" works only once. How can I make it to work continousely? I mean the way that I can click on it 100 times and it will display 100 various divs. And here is my second question: When using for example 100 divs (there are many fun facts about animals) the code below would be very long, is there a simpler way with some kind of creating a loop? There are tons of sliders but I couldn't find anything like I need. Any help would be appreciated.

<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




Aucun commentaire:

Enregistrer un commentaire