Discussion :

[JimPasquet]

Hello,

Je réalise un site où sur la homepage, il m'est demandé d'intégrer 3 pictos aléatoirement. Grâce une fonction php array ça marche.

Ensuite, il faut intégrer un hover aléatoire sur ces pictos, là j'ai utilisé la fonction ramdomPick de JS. Le hover aléatoire fonctionne avec le fonction getElementByID mais lorsque je souhaite passer cette fonction à getElementByClassName (pour appliquer le hover aux 3 pictos de la homepage). Le hover ne marche plus.

Auriez-vous une idée ? Je débute JS, mais n'arrive pas à trouver la solution qui doit être simple pourtant.

Mon

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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
// Random Rollhover1
        function randomPick(arr) {
          var selected = arr[Math.floor(Math.random()*arr.length)]
          return selected;
        }
        images =
        [
        "asset/PICTURES/ICONS/picto1.png",
        "asset/PICTURES/ICONS/picto2.png",
        "asset/PICTURES/ICONS/picto3.png",
        "asset/PICTURES/ICONS/picto4.png",
        "asset/PICTURES/ICONS/picto5.png",
        ]
        function randomHover () {
 
          var myImage = document.getElementByClassName('hover');
          var selImage = randomPick(images);
 
          myImage.src = selImage;
        }
 
        function resetState() {
 
          var myImage = document.getElementByClassName('hover');
          myImage.src = "image_aleatoire1.php";
        }

MON

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="one_third first" style="width: 30.288344%; margin-left: 1%;">
 
         <img class="home_icons hover" src="image_aleatoire1.php" onmouseover="randomHover();" onmouseout="resetState();">
 
       </div>
 
       <div class="one_third" style="width: 30.288344%;">
 
         <img class="home_icons hover" src="image_aleatoire2.php" onmouseover="randomHover();" onmouseout="resetState();">
 
       </div>
 
       <div class="one_third" style="width: 30.288344%;">
 
         <img class="home_icons hover" src="image_aleatoire3.php" onmouseover="randomHover();" onmouseout="resetState();">
 
       </div>

[Watilin]

…
je souhaite passer cette fonction à getElementByClassName
…
mais n'arrive pas à trouver la solution qui doit être simple pourtant.

Effectivement elle est simple. Appuie sur F12 pour ouvrir la console et le problème devrait te sauter aux yeux

La réponse en spoiler :

C’est getElementsByClassName avec un s car elle renvoie plusieurs éléments. Sinon il y a aussi querySelector et querySelectorAll.