How to display images from a JavaScript array in random order

Question

I have tried to show a list of images, but every time the page refreshes the image order change randomly except for the one with a different class name. I wrote this code but it gives me a duplicate image.

I want 3 things:

display all the images without duplicates.
give them random order every time I refresh the page.

the one with a different class name doesn't change position.

.ppl{ width: 250px; }

     var images = [],
     index = 0;
     images[0] = "<img class='ppl pos' src='images/1.jpg' >";
     images[1] = "<img class='ppl pos' src='images/2.jpg' >";
     images[2] = "<img class='ppl pos' src='images/3.jpg' >";
     images[3] = "<img class='ppl n-pos' src='images/g.jpg' >";
     images[4] = "<img class='ppl pos' src='images/4.jpg' >";

     function myFunction() {
     for (var i = 0; i < images.length; i++) {

     index = Math.floor(Math.random() * images.length);
     document.write(images[index]);

         }
     }
     debugger;

     myFunction();
     </script>

This answer which refers Fisher-Yates algorithm may be helpful - please check. — jsN00b
– jsN00b, Commented Jun 26, 2022 at 9:02
You should use a shuffling algorithm on your array and then simply .map() over it: stackoverflow.com/questions/69382004/… — Carsten Massmann
– Carsten Massmann, Commented Jun 26, 2022 at 9:02

kennarddh · Accepted Answer · 2022-06-26 09:06:28Z

const images = [
  'images/1.jpg',
  'images/2.jpg',
  'images/3.jpg',
  'images/g.jpg',
  'images/4.jpg'
]

const root = document.querySelector('#root')

const shuffle = ([...array]) => {
  let currentIndex = array.length
  let temporaryValue
  let randomIndex

  // While there remain elements to shuffle...
  while (currentIndex !== 0) {
    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex)
    currentIndex -= 1

    // And swap it with the current element.
    temporaryValue = array[currentIndex]
    array[currentIndex] = array[randomIndex]
    array[randomIndex] = temporaryValue
  }

  return array
}

const shuffledImages = shuffle(images)

shuffledImages.forEach(src => {
  const image = document.createElement('img')

  image.src = src
  image.alt = src

  image.classList.add('ppl')
  image.classList.add('pos')

  root.appendChild(image)
})

.ppl {
  width: 250px;
}

<div id="root"></div>

Collectives™ on Stack Overflow

How to display images from a JavaScript array in random order

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related