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>
Aucun commentaire:
Enregistrer un commentaire