Chizbe Joe Chizbe Joe - 1 month ago 5
HTML Question

Randomly Changing Images from an Array of Images

The title basically says it all.

I am trying to change an image to a random image from an array of images (hope that makes sense lol).

How can I create an array of images and then have the image change to a random image when something is clicked?

<h1>These are just placeholders</h1>
<p>I just want these images to randomly change to an image from an array of images each time they are shown (when "display" isn't "none")</p>
<img src="https://pixabay.com/static/uploads/photo/2013/11/21/07/30/icon-214446_960_720.jpg" class="newsAD"></img>
<img src="https://pixabay.com/static/uploads/photo/2013/11/21/07/30/according-to-214445_960_720.jpg" class="newsAD"></img>

<style>
.newsAD {
width: 150px;
height: 150px;
margin-left: 50px;
background: skyblue;
cursor: default;
box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 0.4);
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
function changeImageToRandomImage() {
// something here that changes image to random image from array of images
}
</script>


Here's a fiddle.

Answer

In such a situation you would store images somewhere and then store their paths in the array and call them like such:

HTML

<img onclick="changeImageToRandomImage()" id="image" src="img/image_0.jpg">

JavaScript

function changeImageToRandomImage() {
   images = ['img/image_1.jpg', 'img/image_2.jpg','img/image_3.jpg','img/image_4.jpg'];

   var random = images[Math.floor(Math.random()*images.length)];
   document.getElementById('image').src= random;

}