random image button

see it in action here.

<img src="STARTINGIMAGE.JPG" id="EXAMPLEIMG" /><br> <button id="EXAMPLEBUTTON">BUTTON TEXT</button> <script> document.getElementById("EXAMPLEBUTTON").onclick = function() { const imageCollection = [ 'EXAMPLE1.JPG', 'EXAMPLE2.JPG', 'EXAMPLE3.JPG', /* these are your random images. you can have as many as you want */ ]; const randomIndex = Math.floor(Math.random() * imageCollection.length); document.getElementById("EXAMPLEIMG").src = imageCollection[randomIndex]; } </script>

STARTINGIMAGE.JPG is the image that will always show when the page loads, and will be replaced by the random image when the button is clicked.
EXAMPLEIMG must be the same word in the img id, and the javascript.
EXAMPLEBUTTON must also be the same word in the button id, and javascript
if random image button will be used multiple times on one page, EXAMPLEIMG and EXAMPLEBUTTON must be different words for each button and image set.
button and image can be styled with css as normal, i find it helpful to style the image at a fixed height so other page elements don't jump up and down with different image heights.

download text file

return