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