Changer la couleur des cellules

Version imprimable

Bonjour !

J'ai un petit soucis sur ce morceau de code, je comprend pas très bien d'où ça peut provenir :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function Couleur(id)
{
 
	this.priorite1 = '#FE0000';
	this.priorite2 = '#FFCC00';
	this.priorite3 = '#00FF08';
 
	this.id=id;
 
	if (document.getElementById(this.id).style.bgcolor== this.priorite1 ){
		document.getElementById(this.id).style.bgcolor= this.priorite2;
	}
	else if (document.getElementById(this.id).style.bgcolor== this.priorite2){
		document.getElementById(this.id).style.bgcolor= this.priorite3;
	}
	else if (document.getElementById(this.id).style.bgcolor== this.priorite3){
		document.getElementById(this.id).style.bgcolor= this.priorite1;
	}
 
}

et sur mes cellules j'ai :

Code:

1
2
3
<td id="1-10" onclick="Couleur(this.id)" bgcolor="#00FF08">
		10
	</td>

Sur click la couleur ne change pourtant pas : x

Merci d'avance !

Bonjour,
et en faisant simple ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function Couleur(id)
{
 
	var priorite1 = '#FE0000';
	var priorite2 = '#FFCC00';
	var priorite3 = '#00FF88';
 
	if (document.getElementById(id).style.bgcolor== priorite1 ){
		document.getElementById(id).style.bgcolor= priorite2;
	}
	else if (document.getElementById(id).style.bgcolor== priorite2){
		document.getElementById(id).style.bgcolor= priorite3;
	}
	else if (document.getElementById(id).style.bgcolor== priorite3){
		document.getElementById(id).style.bgcolor= priorite1;
	}
 
}

A+

07/07/2008, 16h03
Herman

Toujours rien (ce qui est un peu normal puisqu'au final c'est exactement la même chose :D ).

Je pense que c'est au niveau du if que ça plante, je sais pas si pour tester la couleur d'une cellule on se sert de ça ou si faut tester une autre propriété :s
07/07/2008, 16h08
E.Bzz
Citation:

Envoyé par Herman

Je pense que c'est au niveau du if que ça plante, je sais pas si pour tester la couleur d'une cellule on se sert de ça ou si faut tester une autre propriété :s

En l'occurence, tu testes une propriété CSS que tu n'as pas définies (uniquement la propriété HTML).
Essaye avec
Code:

1 2 <td id="1-10" onclick="Couleur(this.id)" style="background-color:#00FF08;"> 10</td>
... et ce n'était pas la même chose, ne serait-ce que parce que this.id est censé être en lecture seule ;)

A+
07/07/2008, 16h16
Herman

ah ok autant pour moi :oops:

Sinon toujours rien avec cette manip :s
07/07/2008, 16h23
E.Bzz

Te reste à vérifier tes codes hexa ;)

Des fois qu'ils ne correspondent pas :aie:

A+
07/07/2008, 16h24
E.Bzz

... d'où l'intérêt d'avoir un cas par défaut dans les if (ou les case) ...

A+

Même en faisant :
Code:

1 2 3 4 5 6 7 8 9 10 11 function changeCouleur(id) { this.priorite1 = '#FE0000'; this.priorite2 = '#FFCC00'; this.priorite3 = '#00FF88'; document.getElementById(id).style.bgcolor= '#000000'; }
Ça marche pas. Donc déjà c'est pa sla bonne syntaxe pour changer le fond d'une cellule :s

07/07/2008, 16h34
E.Bzz

Citation:

Envoyé par Herman

Ça marche pas. Donc déjà c'est pa sla bonne syntaxe pour changer le fond d'une cellule :s

Non, puisque, comme je te l'ai déjà dit, bgcolor est la propriété HTML.
=> backgroundColor

A+

Alors déjà en faisant background au lieu de bgcolor ça marche un peu mieux

En faisant ça :
Code:

1 2 3 4 5 6 7 8 9 if (document.getElementById(id).style.background == this.priorite1 ){ document.getElementById(id).style.background = this.priorite2; } else if (document.getElementById(id).style.background == this.priorite2){ document.getElementById(id).style.background = this.priorite3; } else { document.getElementById(id).style.background = this.priorite1; }
Mon else est exécuté. Par contre mes if sont jamais exécuté, donc la syntaxe du if est pas bonne :s

07/07/2008, 16h35
E.Bzz

Citation:

Envoyé par E.Bzz

Te reste à vérifier tes codes hexa ;)

Des fois qu'ils ne correspondent pas :aie:
07/07/2008, 16h36
Herman

C'est la première chose que j'ai vérifié ! J'en ai que trois de différents :)
07/07/2008, 16h38
E.Bzz

Citation:

Envoyé par Herman

C'est la première chose que j'ai vérifié ! J'en ai que trois de différents :)

J'en compte 4
Sinon, je n'aurais pas fait la remarque ;)

A+
07/07/2008, 16h39
Herman

Oui le var priorite3 = '#00FF88'; c'était une erreur de recopie dans mon premier post, erreur que j'avais déjà modifiée. C'est var priorite3 = '#00FF08'; =)=)
07/07/2008, 16h45
E.Bzz

Citation:

Envoyé par Herman

Oui le var priorite3 = '#00FF88'; c'était une erreur de recopie dans mon premier post, erreur que j'avais déjà modifiée.

Et on devait deviner (vu que tu n'as pas corriger ci-dessus) ?
C'est un quizz ?

Pas le temps :aie:

Bon courage ...
07/07/2008, 16h49
Herman

Nan mais ça fait 3 ou 4 post que je demande la propriété du if qu'il faut tester, c'est parce que j'ai déjà ciblé le problème et que ça vient pas d'ailleurs.

Donc faut pas se focaliser sur le reste, ma question était et reste très précise : Quelle est la propriété à tester dans un if en Javascript pour voir quelle est la couleur de fond d'une cellule d'un tableau ? ;)

Bon apparemment il faut absolument passer par du RGB et on obtient ça :

Code:

1
2
3
4
5
6
7
8
9
	if (document.getElementById(id).style.backgroundColor   == "rgb(254, 0, 0)" ){
		document.getElementById(id).style.background = this.priorite2;
	}
	else if (document.getElementById(id).style.backgroundColor  == "rgb(255, 204, 0)"){
		document.getElementById(id).style.background = this.priorite3;
	}
	else if (document.getElementById(id).style.backgroundColor  == "rgb(0, 255, 8)"){
		document.getElementById(id).style.background = this.priorite1;
	}

PS : ne pas oublier les espaces derrière les "," sinon ça ne marche pas . . . !! :)

Voilà une solution

Bonjour, après moultes tests voici une solution

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
<html>
<head>
<title></title>
<style type="text/css">
table {
   width: 50%;
   height: 50%;
}
 
td {
   background-color: #fe0000;
}
</style>
<script language="JavaScript">
<!--
function changeCouleur(id)
{
	this.priorite1 = '#fe0000';
	this.priorite2 = '#ffcc00';
	this.priorite3 = '#00ff80';
	this.id = id;
	cellule = document.getElementById(this.id);
	colorcellule = document.getElementById(this.id).currentStyle.backgroundColor;
 
	if (colorcellule == this.priorite1) cellule.style.backgroundColor = this.priorite2;
	if (colorcellule == this.priorite2) cellule.style.backgroundColor = this.priorite3;
	if (colorcellule == this.priorite3) cellule.style.backgroundColor = this.priorite1;
};
// -->
</script>
</head>
<body>
<table >
<tr>
   <td id = "1-1" onClick = "changeCouleur(this.id);" >1</td>
   <td id = "1-2" onclick = "changeCouleur(this.id);" >2</td>
   <td id = "1-3" onclick = "changeCouleur(this.id);" >3</td>
   <td id = "1-4" onclick = "changeCouleur(this.id);" >4</td>
</tr>
<tr>
   <td id="1-5" onclick="changeCouleur(this.id);" >5</td>
   <td id="1-6" onclick="changeCouleur(this.id);" >6</td>
   <td id="1-7" onclick="changeCouleur(this.id);" >7</td>
   <td id="1-8" onclick="changeCouleur(this.id);" >8</td>
</tr>
<tr>
   <td id="1-9" onclick="changeCouleur(this.id);" >9</td>
   <td id="1-10" onclick="changeCouleur(this.id);" >10</td>
   <td id="1-11" onclick="changeCouleur(this.id);" >11</td>
   <td id="1-12" onclick="changeCouleur(this.id);" >12</td>
</tr>
</table>
</body>
 
</html>

Cela ne marcha que sous IE
Les couleurs doivent être en minuscule #fe0000 différent de #FE000.

Bye
Jean-Luc

07/07/2008, 17h56
E.Bzz

Citation:

Envoyé par jlmag

Cela ne marcha que sous IE
Les couleurs doivent être en minuscule #fe0000 différent de #FE000.

Oui oui, ça fonctionne très bien ;)

Le problème était la confusion entre propriété HTML (bgcolor), et CSS (background-color) et leur initialisation.

Mais le message n'est visiblement pas passé :roll:

A+