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 ?