Générer nombre aléatoire sans doublon

Version imprimable

1 pièce(s) jointe(s)

Bonjour à tous, j'ai une fonction qui me génère un nombre aléatoire pour modifier le background url de ma classe ".photo" en css, le problème est qu'a certain moment le même nombre aléatoire est généré et donc le même lien d'image est sélectionner, ce qui implique que la même image est affiché sur ma page. Comment puis-je régler cela ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var images = [];
var photo = document.querySelectorAll(".photo");
 
images[0] = "url(/images/test0.jpg)";
images[1] = "url(/images/test1.jpg)";
images[2] = "url(/images/test2.jpg)";
images[3] = "url(/images/test3.jpg)";
images[4] = "url(/images/test4.jpg)";
images[5] = "url(/images/test5.jpg)";
images[6] = "url(/images/test6.jpg)";
images[7] = "url(/images/test7.jpg)";
images[8] = "url(/images/test8.jpg)";
images[9] = "url(/images/test9.jpg)";
 
function random() {
  var random = Math.floor(Math.random() * 10);
  return random;
}
 
photo[1].style.backgroundImage = images[random()];
photo[2].style.backgroundImage = images[random()];
photo[3].style.backgroundImage = images[random()];
photo[4].style.backgroundImage = images[random()];
photo[5].style.backgroundImage = images[random()];
photo[6].style.backgroundImage = images[random()];
photo[7].style.backgroundImage = images[random()];
photo[8].style.backgroundImage = images[random()];
photo[9].style.backgroundImage = images[random()];

Pièce jointe 629042

Saut

J'ai le code suivant dans mes archives

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<title>Liste de Nbr. aléatoire sans doublon</title>
	</head>
	<script>
                //*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
                function LstSansDbl(min, max){
                        let i;
                        let NumAlea;        //Indice aléatoire
                        let TblNb=[];       //Tableau/Arrays pour contenir les chiffres de mini à maxi
                        let TblAlea=[]; //Tableau/Arrays pour contenir les chiffres aléatoire de la plage min à max
                        // création du tableau/Arrays de min à max
                        for (i = min; i <= max; i++) {TblNb.push(i);}// ajout des éléments(chiffres) de plage min à max
                        // création du tableau/Arrays aléatoire, plage min à max
                        for (i = max - min; i >= 0; i--) {
                NumAlea = Math.floor((i + 1) * Math.random());// tirage pseudo aléatoire
                TblAlea[max - min - i] = TblNb[NumAlea];
                if (NumAlea < i){TblNb[NumAlea] = TblNb[i];}
                        }
                        document.getElementById("NbrTotal").innerHTML = "Array de " + TblAlea.length + " éléments";
                        return TblAlea;
                }//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
 
                function afftirage() {
                        let deb = document.getElementById("id1").value * 1;
                        let fin = document.getElementById("id2").value * 1;
                        if (verif(deb,fin)) {return;}
                        //les entrées ont peut être été permutées
                        deb = document.getElementById("id1").value * 1;
                        fin = document.getElementById("id2").value * 1;
                        document.getElementById("lstarr").innerHTML = LstSansDbl(deb, fin);
                }//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
 
                function verif(val1, val2, valPrem) {
                        let Pobj = document.getElementById("lstarr")
                        if (val2 < val1){
                document.getElementById("id2").value = val1;
                document.getElementById("id1").value = val2;
                        }
                        //-----------------------------------------------------------------------------------
                        let inPobj = document.getElementById("id1");
                        if (inPobj.checkValidity() == false){
                                Pobj.style.color = "white";
                                Pobj.style.backgroundColor = "red";
                                Pobj.innerHTML = 'Debut de plage: ' + inPobj.validationMessage;
                                return true;
                        }
                        //-----------------------------------------------------------------------------------
                        inPobj = document.getElementById("id2");
                        if (inPobj.checkValidity() == false){
                                Pobj.style.color = "white";
                                Pobj.style.backgroundColor = "red";
                                Pobj.innerHTML = 'Fin de plage: ' + inPobj.validationMessage;
                                return true;
                        } 
                        //-----------------------------------------------------------------------------------
                        if (val1 == val2){
                                Pobj.innerHTML = "Vous devez entrer une plage de valeur";
                                return true;
                        }
                        //-----------------------------------------------------------------------------------
                        Pobj.style.color = "Black";
                        Pobj.style.backgroundColor = "white";
                        Pobj.innerHTML = "";
                        return false;
                }//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
 
                function ConvNum(C){
                        let result, ch = Number(C);
                        if (ch < 48 || ch >57){
                                let Chiffres = [224,38,233,34,39,40,45,232,95,231];
                                console.log("convertion");
                                result = Chiffres.indexOf(ch);
            }else{
                                result = String.fromCharCode(ch);
                        }
                        return result;
                }//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
*
                function keypresson1(event){
                        let x = event.which || event.keyCode;
                        event.preventDefault();
                        if (x == 13) {document.getElementById("id2").focus();return};
                        let CVnumber = ConvNum(x);
                        let Pobj = document.getElementById("lstarr")
                        if (CVnumber == -1){
                                Pobj.style.color = "white";
                                Pobj.style.backgroundColor = "red";
                                Pobj.innerHTML = 'Entrez un chiffre';
                        }else{
                                Pobj.innerHTML = "";
                                Pobj.style.color = "Black";
                                Pobj.style.backgroundColor = "white";
                                document.getElementById("id1").value = CVnumber;
                        }
                }//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
 
                function keypresson2(event){
                        let x = event.which || event.keyCode;
                        if (x == 13) {afftirage()};
                }
        //*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
        </script>
<body>
	<div style="position:fixed; border: 1px solid black; padding: 15px; background-color: LightYellow; opacity: 0.95;">
		<input type="number" id="id1" onkeypress="keypresson1(event)" min="0" max="9999" value="1" required>
		<label for="id1">Debut de plage (0 à 9999)</label>
		<br>
		<input type="number" id="id2" onkeypress="keypresson2(event)" min="-9999" max="10000" value="9" required>
		<label for="id2">Fin de plage (1 à 10000)</label>
		<button onclick="afftirage()">Go</button>
		<label id="NbrTotal"></label>
	</div>
	<div style="position:relative; top:110px; border:1px solid black; right:15px; left:0px; width:auto; z-index:-1; word-wrap:break-word;">
		<p id="lstarr" style="margin: 2px 2px 2px 2px;"></p>
	</div>
</body>
</html>

Il y a peut être plus simple ....

Motif de l'édit:
Nettoyage du code
Tout se passe dans la fonction LstSansDbl(min, max) l'array récupré en retour est TblAlea, tableau de chiffres aléatoire sans doublon.

16/11/2022, 08h19
SpaceFrog

Perso je passe plutot par un pop sur l'array, avec un rand sur le nombre d'éléments qu'il contient, ce qui évite d'avoir deux fois la même image vu qu'après chaque "tirage" une image est retirée de l'array

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var images = [];
var photo = document.querySelectorAll(".photo");
 
images[0] = "url(/images/test0.jpg)";
images[1] = "url(/images/test1.jpg)";
images[2] = "url(/images/test2.jpg)";
images[3] = "url(/images/test3.jpg)";
images[4] = "url(/images/test4.jpg)";
images[5] = "url(/images/test5.jpg)";
images[6] = "url(/images/test6.jpg)";
images[7] = "url(/images/test7.jpg)";
images[8] = "url(/images/test8.jpg)";
images[9] = "url(/images/test9.jpg)";
 
const shuffledImages = images.sort((a, b) => 0.5 - Math.random());
 
shuffledImages.forEach((id,i) => {
    photo[i].style.backgroundImage = id;
});

16/11/2022, 08h22
SpaceFrog

En effet Dok le sort random est moins gournmand car l'array conserve son contenu.
Cela suppose néamoins qu'il y ait exactement le même nombre de backgrounds à attribuer que d'images dans le tableau.

si on en est a donner son avis, j'aurai plutot fait une boucle sur les elements

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const images = [
'url(/images/test0.jpg)',
'url(/images/test1.jpg)',
'url(/images/test2.jpg)',
'url(/images/test3.jpg)',
'url(/images/test4.jpg)',
'url(/images/test5.jpg)',
'url(/images/test6.jpg)',
'url(/images/test7.jpg)',
'url(/images/test8.jpg)',
'url(/images/test9.jpg)'
];
const shuffledImages = images.sort((a, b) => 0.5 - Math.random());
 
document.querySelectorAll(".photo").forEach((photo,i) => {
    if(shuffledImages[i]) {
        photo.style.backgroundImage = shuffledImages[i];
    } else {
        console.log('no more image to set');
        // on peu imaginer mettre une image par default style placeholder
    }
});

16/11/2022, 11h03
Jeremy_prt

Salut, merci ça fonctionne parfaitement !