Probleme image duplication

Fermé

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

'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

A voir également:

Probleme image duplication
Duplication écran - Guide
Image iso - Guide
Acronis true image - Télécharger - Sauvegarde
Faststone image viewer - Télécharger - Visionnage & Diaporama
Image iso windows 10 - Guide

1 réponse

Réponse 1 / 1

Pitet
17 nov. 2022 à 13:03

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
17 nov. 2022 à 13:40

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

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++;
    })
  }

ludo > Pitet
17 nov. 2022 à 21:57

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

Discussions similaires

Comment enlever le rouge sur la photo svp ?

Comment recadrer une image avec Inkscape

sortir des réseaux sociaux