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>