Javascript/HTML - repeating a function with onclick

Question

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

There is no need to hideNumber(); shuffle(); showMeme();. Just use a function to replace the image by a random image taken from the array — Ken Lee
– Ken Lee, Commented Dec 25, 2020 at 1:15
document.write smashes all page content. You probably want someRootElem.innerHTML instead. You already have a <div> so give it an id and set its innerHTML with the new image element. — ggorlen
– ggorlen, Commented Dec 25, 2020 at 1:15

digitalbreed · Accepted Answer · 2020-12-25 01:17:43Z

2

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.

answered Dec 25, 2020 at 1:17

digitalbreed

4,0704 gold badges29 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anish Sapkota · Accepted Answer · 2020-12-25 01:23:19Z

1

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>

answered Dec 25, 2020 at 1:23

Anish Sapkota

80411 silver badges20 bronze badges

2 Comments

Nikey63 Over a year ago

If i change the writing of my arrays as you suggested, how can i style those pictures in the arrays? Where/How do I add a style tag or a class/id to style them in my stylesheet? Thank You!

Anish Sapkota Over a year ago

you can add style on 'number' id. Like if you want to define width by using style: #number{ width: 500px }

Collectives™ on Stack Overflow

Javascript/HTML - repeating a function with onclick

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related