CODEWITHSUNDEEP
javascripthtmljqueryfunctionrepeat
Nikey63
Nikey63

Reputation: 39

Javascript/HTML - repeating a function with onclick

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

Upvotes: 3

Views: 687

Answers (2)

Anish Sapkota
Anish Sapkota

Reputation: 814

This might help:

<body>
  <!-- button with functions:hide initial picture, select random picture, show random picture-->
  <button onClick="shuffle();">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 so the button should be reclickable / array filled with pictures
function shuffle(){
  var images1 = [],
  index1 = 0;
  images1[0] = "images/meme1.jpg";
  images1[1] = "images/meme2.jpg";
  images1[2] = "images/meme3.jpg";
  //selecting random number
  index1 = Math.floor(Math.random() * images1.length);
  //displaying random image out of array
  document.getElementById("number").src = images1[index1];
}
  </script>
</body>

Upvotes: 1

digitalbreed
digitalbreed

Reputation: 4070

document.write will replace the entire page. Give your <div> with the initial image an ID and use this to replace the content of this element:

<div id="wrapper">
    <img id="number" src="images/zahl1.jpg" alt="Number">
</div>

Replace document.write(images1[index1]); with:

document.getElementById('wrapper').innerHTML = images1[index1];

Note that you can remove the style='visibility:hidden' style from the images and get rid of the visibility toggle, as the elements in the array are simple strings, no images are loaded here, and the currently displayed image will be replaced entirely.

You can improve this further by simply replacing the image src attribute instead of replacing entire chunks of HTML, unless you've got a reason to do more than just that.

Upvotes: 2

Related Questions