11544 sujets

JavaScript, DOM et API Web HTML5

Récupération et modification backgroundColor d'un td

Bonjour,

je débute en JS et je souhaite réaliser un petit jeu où l’utilisateur clic sur les cellules d'un tableau pour les faire changer de couleur.
Le problème c'est que je n'arrive pas à récupérer la couleur de la cellule ou j'ai cliqué...

Voici mon code HTML:
<table>
	<tr>
		<td id="case1" onclick=changeColor(1)></td><td id="case2" onclick=changeColor(2)></td>
	</tr>
	<tr>
		<td id="case3" onclick=changeColor(3)></td><td id="case4" onclick=changeColor(4)></td>
	</tr>
</table>


Et voici le JS:

function changeColor(i)
{
	var e = document.getElementById('case'+i);
	
	if(e.style.backgroundColor == '#FFFFFF')
	{
		e.style.backgroundColor = '#FF0000';
	}
	else
	{
		e.style.backgroundColor = '#FFFFFF';
	}
}


et j'ai bien spécifié le background en blanc dans le CSS:
td
{
	background-color:#FFFFFF;
}


Dans tous les, je rentre dans le else.

Quel est donc le problème?
Merci d'avance Smiley smile
Bonjour,

L'objet element.style représente l'attribut style de l'élément HTML. Les styles CSS définis dans une feuille de styles (plutôt que directement sur l'élément avec cet attribut) n'y sont pas reflétés. Donc au départ e.style.backgroundColor correspond à une chaine vide (""). Ta condition doit donc tester aussi le cas où e.style.backgroundColor est vide (non modifié). Ou bien tu peux modifier ta condition:
if (e.style.backgroundColor != '#FF0000') {...}
Le problème c'est que je ne rentre jamais dans le deuxième cas.
En gros j'aimerai que lorsque on clic sur une case blanche elle devienne rouge, et lorsque on clic sur une case rouge elle devienne blanche.

Là quand je clic sur une case blanche, elle devient rouge, mais si je clic sur cette même case devenu rouge elle reste rouge.

Peut-être je n'utilise pas la bonne méthode pour récupérer la valeur CSS d'un élément particulier Smiley ohwell
Bonjour somonflex,

Ne voyant pas très bien l'objectif final de ton jeu, voici un petit bout de code qui pourrait te mettre sur la piste :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Changer la couleur de fond par JS</title>
    <style type="text/css">
	/*<![CDATA[*/
		table {border:none;}
        td {background-color:#fff;cursor:pointer;}
    /*]]>*/
    </style>
    <script type="text/javascript">
	//<![CDATA[
    function changeColor(elm){
        var el = elm.style;
        if(el.backgroundColor == '' || el.backgroundColor == '#ffffff')
        {
          el.backgroundColor = '#ff0000';
        }else{
          el.backgroundColor = '#ffffff';
        }
    }
    //]]>
    </script>
  </head>
  <body>
    <table border="1" cellpadding="30">
      <tr>
        <td onclick="changeColor(this)"></td>
        <td onclick="changeColor(this)"></td>
      </tr>
      <tr>
        <td onclick="changeColor(this)"></td>
        <td onclick="changeColor(this)"></td>
      </tr>
    </table>
  </body>
</html>

Tu remarqueras que je n'ai plus utilisé des IDs pour désigner les éléments. Rien ne t'empêche de le faire si tu en as besoin à d'autres fins.

Cordialement
Tout d'abord, merci à vous tous de tenter de m'aider Smiley smile
En faite j'essai de reproduire un jeu de style picross

Là je viens d'essayer ton code, le problème c'est qu'une fois que j'ai cliqué deux fois sur une case, plus rien ne se passe (et je comprends vraiment pas pourquoi Smiley biggol )
somonflex a écrit :
Là je viens d'essayer ton code, le problème c'est qu'une fois que j'ai cliqué deux fois sur une case, plus rien ne se passe (et je comprends vraiment pas pourquoi )


Désolé, j'avais pas fait attention. En fait, c'est dû à la conversion des couleurs en HEX vers le RGB et inversément. Pour qu'il n'y ait plus ce problème, utilise les noms anglais des couleurs: donc, au lieu de #FFFFFF, indique 'white', au lieu de '#FF0000', indique 'red'. ;-D

Liste des 16 couleurs de base en HTML:
---------------------------------------
Black = "#000000"
Silver = "#C0C0C0"
Gray = "#808080"
White = "#FFFFFF"
Maroon = "#800000"
Red = "#FF0000"
Purple = "#800080"
Fuchsia = "#FF00FF"
Green = "#008000"
Lime = "#00FF00"
Olive = "#808000"
Yellow = "#FFFF00"
Navy = "#000080"
Blue = "#0000FF"
Teal = "#008080"
Aqua = "#00FFFF"

L'utilisation des 'noms' de ces couleurs au lieu des valeurs HEX ou RGB est valide pour le W3C.
Modifié par lddsoft (02 Dec 2011 - 11:35)
Sujet clos
Aller à