Probleme image duplication
ludo -
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
- Probleme image duplication
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Reduire taille image - Guide
- Légender une image - Guide
- Image gratuite - Guide
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.
merci pour l'aide mais je suis vraiment tres débutant dans le js duccoup je ne sait pas ou integrer votre code , ece que c'est dans la meme "function" ? serait il possible d'integrer le code necessaire dans le bon emplacement ? ou faut il un nouveau script? merci
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++; }) }merci énormément votre modification marche a merveille je vous remercie pour votre aide :)