Probléme changement de fond au clique

Sujet résolu

4 novembre 2010 à 7:14:32

Salut à tous ! Je voudrais en Javascript faire un script qui me permette de changer le fond de la page quand in clique sur un lien. Mais mon code ne marche pas et je ne vois pas ce qui ne va pas

Voici mon code :

<body id="body">Cliquez sur un des liens pour changer la couleur de fond :<br/>
<span id="rouge">Rouge</span>
<script>
var red = document.getElementById("rouge");
red.onclick = function()
{
document.getElementById("body").style.backgroundColor = "red";
}
</script></body>

Peut-étre devrai-je interragir avec la balise <html> au lieu de <body> ? ...

oulalahakabu

4 novembre 2010 à 8:31:55

Non, le souci vient de comment tu poses l'événement amha.

bidule.onclick = ...

je ne pense pas que cela puisse fonctionner partout, pour t'en assurer, fais un alert (red.onclick); et tu auras certainement un undefined sous ie6.

Soit tu poses l'événement sur le lien dans un attribut (<a href="#" onclick="..."), soit tu utilises la méthode attachEvent() (seulement pour ie), ça donne un truc du style :

_change = function(e)
{
   document.getElementById("body").style.backgroundColor
}

var red = document.getElementById("rouge");
if (red.attachEvent)
{
     red.attachEvent ("onclick",_change);
} 
else if (red.addEventListener) 
{
    red.addEventListener ("click",_change,false);
}

L'héroïsme, c'est la seule manière de devenir célèbre quand on a pas de talent.

Blalord

4 novembre 2010 à 11:03:33

HS: pas besoin de mettre une id a body, pour modifier son CSS:
body
{

}

cornedrue

4 novembre 2010 à 12:03:51

Et tu fais comment avec le Js ?

Blalord

4 novembre 2010 à 15:11:19

document.body

cornedrue

4 novembre 2010 à 18:01:09

ok je vais essayer

EDIT :
Bon j'ai trouvé tout seul

Pour que ça aide les autres plus tard :

<html id="html">
<style>
a {color: black; text-decoration: none;}

</style>
<body>
Cliquez sur un des liens ci-dessous pour changer la couleur de fond de la page :<br/>
<a href="#" id="white" onclick="fond_ecran(this.id)">Blanc</a><br/>
<a href="#" id="silver" onclick="fond_ecran(this.id)">Gris</a><br/>
<a href="#" id="gray" onclick="fond_ecran(this.id)">Anthracite</a><br/>
<a href="#" id="black" onclick="fond_ecran(this.id)">Noir</a><br/>
<a href="#" id="red" onclick="fond_ecran(this.id)">Rouge</a><br/>
<a href="#" id="maroon" onclick="fond_ecran(this.id)">Marron</a><br/>
<a href="#" id="lime" onclick="fond_ecran(this.id)">Vert clair</a><br/>
<a href="#" id="green" onclick="fond_ecran(this.id)">Vert foncé</a><br/>
<a href="#" id="yellow" onclick="fond_ecran(this.id)">Jaune</a><br/>
<a href="#" id="olive" onclick="fond_ecran(this.id)">Olive</a><br/>
<a href="#" id="blue" onclick="fond_ecran(this.id)">Bleu</a><br/>
<a href="#" id="navy" onclick="fond_ecran(this.id)">Bleu marine</a><br/>
<a href="#" id="fuchsia" onclick="fond_ecran(this.id)">Rose</a><br/>
<a href="#" id="purple" onclick="fond_ecran(this.id)">Violet</a><br/>
<a href="#" id="aqua" onclick="fond_ecran(this.id)">Turquoise</a><br/>
<a href="#" id="teal" onclick="fond_ecran(this.id)">Outremer</a><br/>
<script>
function fond_ecran(id)
{
document.getElementById("html").style.backgroundColor = id;
}
</script>
</body>
</html>