Probleme image duplication
Bonjour, je Vien de commencer a apprendre le js et Jai un code que je doit implémenter dans un site web pour afficher des images aléatoire , le code que j'ai trouver marche bien mais il y a plusieurs fois la même image , merci de votre aide
<script>
window.onload = function() {
let myPics = [
'images/img correct/1.jpg',
'images/img correct/2.jpg',
'images/img correct/3.jpg',
'images/img correct/4.jpg',
'images/img correct/5.jpg',
'images/img correct/6.jpg',
'images/img correct/7.jpg',
'images/img correct/8.jpg',
'images/img correct/9.jpg',
'images/img correct/10.jpg',
'images/img correct/11.jpg',
'images/img correct/12.jpg',
'images/img correct/13.jpg',
'images/img correct/14.jpg',
'images/img correct/15.jpg',
'images/img correct/16.jpg',
'images/img correct/17.jpg',
'images/img correct/18.jpg',
];
function showPics() {
document.querySelectorAll('.img').forEach(function(tag) {
let index = getRandomIndex();
tag.src = myPics[index];
tag.addEventListener('click', getImageName);
tag.dataset.index = index;
})
}
function getRandomIndex() {
return Math.floor(Math.random() * myPics.length);
}
function getImageName() {
alert(myPics[this.dataset.index])
}
showPics();
}
</script>
il faut que Jai 9 images des 18 aléatoire non dupliqué dans mon site web
merci d'avance
Windows / Chrome 107.0.0.0
1 réponse
-
Bonjour,
La fonction getRandomIndex() peut effectivement retourner plusieurs fois le même index.
Une solution possible serait de créer un tableau contenant tous les index possibles (const indexes = [...Array(myPics.length).keys()];) puis mélanger ce tableau de manière aléatoire (indexes.sort(() => Math.random() - 0.5);) et utiliser les 9 premiers index de ce tableau mélangé pour afficher les images.
-
-
@ludo
Pour exemple, essaye de modifier ta fonction showPics comme ceci :
function showPics() { const indexes = [...Array(myPics.length).keys()]; indexes.sort(() => Math.random() - 0.5); let i = 0; document.querySelectorAll('.img').forEach(function(tag) { tag.src = myPics[indexes[i]]; tag.addEventListener('click', getImageName); tag.dataset.index = indexes[i]; i++; }) } -
@Pitet
merci énormément votre modification marche a merveille je vous remercie pour votre aide :)
-
