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:

1. display all the images without duplicates.

2. give them random order every time I refresh the page.

3. 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>
   

Answer 1

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>