Javascript et classes

Bonjour à tous,:coucou:

Je débute le javascript, le CSS et le HTML5 depuis quelques semaines, et je suis confronté à un problème depuis 3 jours, à s'en arracher les cheveux:arf::

je voudrais essayer de reproduire cet effet. J'en suis au stade des lumieres qui s'allument et s'éteignent...

La seule solution que j'ai trouvée et de changer la classe de chaque lumière(des li avec des identifiants lumiere_1/2 etc...) à chaque click sur les icones.

le CSS

Code:

---

1 2 3 4 5 6 7 8 9 10

//alluméé .lumiere_allume{ background-color: white; box-shadow: -1px 1px 10px 3px white; } //éteinte .lumiere_eteinte{ background-color: rgb(25,25,25); box-shadow: none; }

---

le javascript:

Code:

---

1 2 3 4 5 6 7

function clic(valeur){ //valeur correspond à l'indice des li for (var i=1;i<5;i++){ document.getElementById('lumiere_'+i).className='lumiere_eteinte'; } document.getElementById('lumiere_'+(valeur+1)).className='lumiere_allume'; }

---

et le HTML

Code:

---

1 2 3 4 5 6

<ul id="lumieres"> <li id="lumiere_1"></li> <li id="lumiere_2"></li> <li id="lumiere_3"></li> <li id="lumiere_4"></li> </ul>

---

mais quand je compile, les couleurs de fond ne changent pas au click.:weird: Pourquoi???
Y a-t-il confrontation avec les identifiants(vide) et les classes??

Citation:

---

mais quand je compile

---

Tu compiles du JavaScript toi ? :P

Ta fonction est appelée à quel moment ?

met dans ton code HTML

Code:

---

1 2 3 4 5 6

<ul id="lumieres"> <li id="lumiere_1" onclick="clic(1);"></li> <li id="lumiere_2" onclick="clic(2);"></li> <li id="lumiere_3" onclick="clic(3);"></li> <li id="lumiere_4" onclick="clic(4);"></li> </ul>

---

Il nous faut voir le code ou tu initialises valeur et appelle ta fonction JS

Citation:

---

Tu compiles du JavaScript toi ?

---

Pas faux, pas faux...:oops::mrgreen: mais comme je faisais du pascal delphi avant, j'ai gardé le vocabulaire:aie:

voilà le moment où j'appelle la fonction :

Code:

---

1 2 3 4 5 6 7 8

<div id="icones"> <ul class="boite"> <li onclick="clic(0)"><div>#1</div></li> <li onclick="clic(1)"><div>#2</div></li> <li onclick="clic(2)"><div>#3</div></li> <li onclick="clic(3)"><div>#4</div></li> </ul> </div>

---

Mais je ne pense pas que le problème viennent de là car l'ombre bouge bien, signifiant que le onclick est bien déclenché mais la couleur de fond ne change pourtant pas....:aie:

ça change quelque chosE si tu remplace "background-color" par "background" ?

Citation:

---

ça change quelque chosE si tu remplace "background-color" par "background" ?

---

Oui!!:bravo:
J'aurais jamais deviné que c'était ça le problème. Merci beaucoup à tous ceux qui ont pris la peine de me répondre!! C'était tellement idiot...

la propriété "background-color" étant souvent fixe cela ne m'étonne pas
et c'est aussi pourquoi j'évite de l'utiliser

Bonjour,

Citation:

---

Envoyé par Basile le disciple

J'aurais jamais deviné que c'était ça le problème(...)

---

:koi:
je ne vois pas en quoi cela pourrait interférer sauf si d'autres valeurs sont donnés par après sur le background, background-color n'étant qu'une partie de la propriété background.

Par contre dans ton code CSS les commentaires ne sont pas valides et font que le CSS n'est pas pris en compte

Code:

---

1 2 3 4 5 6 7 8 9 10

/*alluméé -- commentaire valide --*/ .lumiere_allume{ background-color: white; box-shadow: -1px 1px 10px 3px white; } /* éteinte -- commentaire valide --*/ .lumiere_eteinte{ background-color: rgb(25,25,25); box-shadow: none; }

---

:faq: Comment insérer un commentaire dans une feuille de style ?