Changer la valeur d'un backGround

Version imprimable

Bonjour,

Je souhaiterais creer une fonction JavaScript toute simple, qui modifie la valeur de la prorpiété background d'une balise span, lorsque je clique dessus.
J'ai effectué des recherches pour comprendre javascript (que je ne connais pas tres bien), et voici le resultat qui ne fonctionne pas:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 function ChangeColor(){ var laValeur=document.getElementById("span_span").style.backgroundColor; switch (laValeur) { case "#FF0000": document.getElementByID("span_span").style.backgroundColor='#FF6600'; break; case '#FF6600': document.getElementById("span_span").style.backgroundColor='#00FF00'; break; case '#00FF00': document.getElementById("span_span").style.backgroundColor='#999999'; break; case '#999999': document.getElementById("span_span").style.backgroundColor='#FF0000'; break; default: alert('rien trouvé'); break; }
Et j'arrive toujours sur l'alerte "rien trouvé".
Dans ma page voici ma balise span:

Code:

<span id='span_span' onclick='ChangeColor()' style='background-color:#FF0000; width:8px; height:24px;'>blabla</span>

Quelqu'un peut t il m'eclairer et m'expliquer pourquoi cela ne fonctionne pas?

Merci

12/02/2009, 10h34
marcha

Salut,

fait un alert(laValeur) avant le switch, je pense que tu aura la couleur
en notation rgb(r,g,b) (à vérifier).
12/02/2009, 10h42
jubourbon

il me renvoi bien #FF0000
on dirai que le switch ne capte pas la valeur
12/02/2009, 10h53
jubourbon

J'ai trouvé:
La fonction renvoi le numero de couleur en minuscule, et mon switch compare des valeur en majucsule.
12/02/2009, 10h58
marcha

Salut,

Chez moi il m'affiche "rgb(255,0,0)" (sous FireFox)
12/02/2009, 11h13
marcha

Citation:

Envoyé par jubourbon

J'ai trouvé:
La fonction renvoi le numero de couleur en minuscule, et mon switch compare des valeur en majucsule.

Prends garde au fait que tous les navigateurs ne retournent pas la
couleur au même format.

En fait, c'est plus traître que ça. Selon le navigateur j'obtiens des résultats différents. En exécutant ce test :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr"> <head> <title>attacher plusieurs évènements sur un élément</title> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> #d {width:200px;height:200px;background:#ccc;} </style> </head> <body> <div id="d" style="background-color:#00f;"></div> <script type="text/javascript"> alert(document.getElementById("d").style.backgroundColor); </script> </body> </html>
J'obtiens sous FF et Safari : "rgb(0, 0, 255)" (sans oublier l'espace après les virgules)
sous IE : "#00f" (la valeur saisie)
sous Opera : "#0000ff"

Il faudrait peut-être passer pas des classes CSS.

edit: grillé, mais j'ai l'habitude