Display random images

programming
1

I have been following the article ‘Displaying a random image’ , which uses javascript, and have it working okay. But I would now like to call the function a number of times and display all the images side by side.
Something like
displayRandomImage();
displayRandomImage();
displayRandomImage();
But I only get one image if I do this.

Any help with this would be very much appreciated.
Thanks

2

Welcome leeds42! :slight_smile:

Right now the displayRandomImage() function specifically targets the “randomImage” element. Every time you call it, it will always update that same element.

What you can do instead is allow it to specify which element you want to target. Then each time you call it, you can tell it to refer to a different element. You’ll just need to make sure you update your HTML to add those extra elements too:

<img id="randomImage"/>
<img id="randomImage2"/>
<img id="randomImage3"/>

Then the updated function would look something like:

function displayRandomImage(elementId) {
  var htmlImage = document.getElementById(elementId);
  htmlImage.src = getRandomImage();
}

When you call it, you would want to make sure you specify which image to set the random image to:

displayRandomImage("randomImage");
displayRandomImage("randomImage2");
displayRandomImage("randomImage3");
1 Like
3

That’s brilliant. Thanks a lot.