Sélectionner des classe en JS

Version imprimable

1 pièce(s) jointe(s)

Bonjour, j'ai fait une fonction qui change le background de ma classe aléatoirement; le problème c'est que ça s'applique que pour une seule classe alors que toutes mes cases ont les mêmes classes, pourquoi ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var images = []; //array //images images[0] = "url(/images/test1.jpg)"; images[1] = "url(/images/test2.jpg)"; images[2] = "url(/images/test3.jpg)"; //function function changeImage() { var photo = document.querySelector("#exposition .photo"); photo.style.backgroundImage = images[Math.floor(Math.random() * 3)]; } window.onload = changeImage;
Pièce jointe 628961

15/11/2022, 06h39
mathieu

"querySelector", retourne seulement le 1er élément. pour les retourner tous, vous pouvez utiliser "querySelectorAll" et faire une boucle :
https://developer.mozilla.org/fr/doc.../querySelector
https://developer.mozilla.org/fr/doc...erySelectorAll

vous pouvez aussi lister des éléments avec une classe avec cette méthode :
https://developer.mozilla.org/fr/doc...ntsByClassName
15/11/2022, 15h03
Jeremy_prt

1 pièce(s) jointe(s)

Salut, je suis vraiment novice en JS, tu peux m'expliquer le code car quand je mets querySelectorAll j'ai cette erreur, je ne comprends pas le système de boucle :
Pièce jointe 629003
15/11/2022, 15h57
mathieu

il faut nous montrer le code pour ça.

regardez aussi les exemples là :
https://developer.mozilla.org/fr/doc...orrespondances

HTML

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
<section id="exposition">
      <h1>Photo de Gaudi</h1>
      <div class="center">
        <div class="groupe_image">
          <div class="photo">
            <div class="bordur">1</div>
            <p>Description photo 1</p>
          </div>
          <div class="photo">
            <div class="bordur">2</div>
            <p>Description photo 2</p>
          </div>
          <div class="photo">
            <div class="bordur">3</div>
            <p>Description photo 3</p>
          </div>
        </div>
        <div class="groupe_image2">
          <div class="photo">
            <div class="bordur">4</div>
            <p>Description photo 4</p>
          </div>
          <div class="photo">
            <div class="bordur">5</div>
            <p>Description photo 5</p>
          </div>
        </div>
        <div class="groupe_image3">
          <div class="photo">
            <div class="bordur">6</div>
            <p>Description photo 6</p>
          </div>
        </div>
        <div class="groupe_image4">
          <div class="photo">
            <div class="bordur">7</div>
            <p>Description photo 7</p>
          </div>
          <div class="photo">
            <div class="bordur">8</div>
            <p>Description photo 8</p>
          </div>
          <div class="photo">
            <div class="bordur">9</div>
            <p>Description photo 9</p>
          </div>
        </div>
      </div>
    </section>

CSS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*Centre les 2 images ronde*/
#exposition .center .groupe_image2 {
  display: flex;
  justify-content: space-evenly;
  padding-top: 150px;
  flex-wrap: wrap;
}
 
/*Taille des 2 images rondes*/
#exposition .center .groupe_image2 .photo {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 300px;
  width: 300px;
  text-align: center;
  color: white;
  border-radius: 200px;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var images = []; //array
 
//images
 
images[0] = "url(/images/test1.jpg)";
images[1] = "url(/images/test2.jpg)";
images[2] = "url(/images/test3.jpg)";
//function
 
function changeImage() {
  var photo = document.getElementsByClassName("photo")[1];
  photo.style.backgroundImage = images[Math.floor(Math.random() * 3)];
}
 
window.onload = changeImage;

les boucles permettent de parcourir les tableaux et les listes en exécutant à chaque fois le même code.

cela donne quelque chose comme ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 const toutes_les_balises_photo = document.querySelectorAll("#exposition .photo"); toutes_les_balises_photo.forEach(photo => { // ici le code est exécuté une fois pour chaque élément de la liste // la variable photo contient d'abord le 1er élément ensuite le 2e élément de la liste, etc. })