I'm a beginner in Javascript/HTML. So I'm sorry if I'm missing something obvious.
My task:
On my website I want to show a picture, which is always the same when the website is loaded or refreshed. Next to that picture I want to implement a button which says: "shuffle". This button hides the first initially shown picture and then shows a random picture which is selected out of an array instead. After the pictures change, the button "shuffle" should be clickable again and each time it's clicked it should give out a new randomly selected picture from the array. The first initial picture should only be shown again when the website is refreshed.
My Problem:
When the button "shuffle" is clicked the pictures change but also the button and everything else i would code that should be displayed on the website disappears. So it's impossible to click again. To repeat the selection of a new random image i have put my array in a function which is selected through a oncklick on the button(I think my problem lays here). If I delete this function arround my array, the button wont dissapear when clicked but the button is not clickable more than once. Pictures of this problem are included at the bottom of this post. I hope you'll understand my problem and you will be able to help me. Thanks!
Code:
<body>
<!-- button with functions:hide initial picture, select random picture, show random picture-->
<button onClick="hideNumber(); shuffle(); showMeme();">Shuffle</button>
<!--initial picture thats not random and always shown when page is loaded-->
<div>
<img id="number" src="images/zahl1.jpg" alt="Number">
</div>
<script type="text/javascript">
function hideNumber() {
var x = document.getElementById("number");
if (x.style.display == "none") {
} else {
x.style.display = "none";
}
}
//function so the button should be reclickable / array filled with pictures
function shuffle(){
var images1 = [],
index1 = 0;
images1[0] = "<div><img src='images/meme1.jpg' id='Meme1' style='visibility:hidden' alt='meme1'></div>";
images1[1] = "<div><img src='images/meme2.jpg' id='Meme1' style='visibility:hidden' alt='meme2'></div>";
images1[2] = "<div><img src='images/meme3.jpg' id='Meme1' style='visibility:hidden' alt='meme3'></div>";
//selecting random number
index1 = Math.floor(Math.random() * images1.length);
//displaying random image out of array
document.write(images1[index1]);
}
//execute function? (not sure if done right)
shuffle();
//function to show the random picture when button is clicked
function showMeme() {
document.getElementById('Meme1').style.visibility='visible';
}
</script>
</body>
Here is a picture which shows the website when its first loaded
Second picture shows what happens the button is clicked. First picture dissapears and second random picture shows (just how it should be) but the button to generate a different random picture just dissapears
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
