Probleme image duplication

ludo - 17 nov. 2022 à 08:56
 ludo - 17 nov. 2022 à 21:57

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.

0

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

0
Pitet > ludo
17 nov. 2022 à 16:53

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++;
    })
  }
0
ludo > Pitet
17 nov. 2022 à 21:57

merci énormément votre modification marche a merveille je vous remercie  pour votre aide :)

0