Javascript Change image on click

Question

I have a some images

<img src="hey.png" alt=""/><img src="asf.png" alt=""/><img src="3.png" alt=""/><img src="4.png" alt=""/>

How to make sure that when you click on the picture - these 4 images were interchanged arbitrarily (random)?

Answer 1

Here's an algorithm:

• grab the dom elements for the images and put them in an array
• shuffle the array
• remove them from the page
• put them back on the page in the newly shuffled order.

Implementation is left as an exercise for the reader.

Answer 2

Choose a random number and exchange the source of the image with the first image and then replace the src of other two images

Eg to get select index of random image

index = Math.floor(Math.random() * images.length);

You can access the source of image by using

document.getElementById("ImageId").src = "Image source"