Discussion :

[Herman]

Bonjour !

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[E.Bzz]

Bonjour,
et en faisant simple ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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+

[Herman]

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

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

[E.Bzz]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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+

[Herman]

ah ok autant pour moi

Sinon toujours rien avec cette manip :s

[E.Bzz]

Te reste à vérifier tes codes hexa

Des fois qu'ils ne correspondent pas

A+

[E.Bzz]

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

A+

[Herman]

Même en faisant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[E.Bzz]

Ç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+

[Herman]

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

En faisant ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[E.Bzz]

Te reste à vérifier tes codes hexa

Des fois qu'ils ne correspondent pas

[Herman]

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

[E.Bzz]

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+

[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'; =)=)

[E.Bzz]

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

Bon courage ...

[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 ?

[Herman]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 . . . !!

[Invité]

Bonjour, après moultes tests voici une solution

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[E.Bzz]

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é

A+