fonction changer couleur de fond sur onclick [Résolu]

[eddflo]

Bonjour,
Etant novice (et mauvais) en javascript, j'ai écrit une fonction censée changer la couleur de fond d'une table lors d'un événement onclick sur un checkbox.
Jusque là, ça fonctionnait. Ca s'est gâté lorsque j'ai généré chaque tableau et chaque checkbox dynamiquement et que j'ai voulu faire un getElementById et récupérer le contenu dynamique.

Le code pour que ce soit plus clair : la partie html/php

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
$i=0;
					$a=0;
					while(list($id,$exp,$dest,$log1,$clef1,$date,$heure,$login,$cle,$sujet,$content,$statut,$statut1,$archive,$archive1)=mysql_fetch_array($demandmess))
					{
 
							if($statut1=='l' OR $statut1=='r')
							{
								?>
								<table class="messageriel" id="<?php echo $i;?>">
								<?php
							}
							else
							{
								?>
								<table class="messagerie" id="<?php echo $i;?>" >
								<?php
							}
							?>
							<tr>
								<td width="20">
									<input type="hidden" name="var" value="r">
									<input type="hidden" name="idd" value="<?php echo $id;?>">
                                    <input type="checkbox" id="<?php echo $a;?>" onClick="changeColor();" >
 
								</td>
								<td width="75">
									<?php echo $date;?>
								</td>
								<td width="75">
									<?php echo $heure;?>
								</td>
								<td width="160">
									de <?php echo $log1;?>
								</td>
								<td width="310">
									<a href="message_messagerie_gueule_de_chien.php?idd=<?php echo $id;?>"><b><?php echo $sujet;?></b></a>
								</td>
							</tr>
							</table>
							<?php
							$i=$i++;
							$a=$a++;
						}

et la fonction javascript :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type"text/javascript">
function changeColor()
{
	if(document.getElementById('<?php echo $a;?>').checked == true)
	{
 		document.getElementById('<?php echo $i;?>').style.backgroundColor = '#ffff99';
	}
	else
	{
		document.getElementById('<?php echo $i;?>').style.backgroundColor = '#cccccc';
	}
 
}
</script>

Si quelqu'un peut m'expliquer pourquoi ça ne marche pas, ce serait vraiment l'idéal et me permettrait peut-être de comprendre davantage comment fonctionne javascript.
Merci d'avance pour vos réponses.

[NoSmoking]

Bonjour,
une bonne idée serait de nous montrer le code HTML généré à la place du code PHP.

[eddflo]

Bonjour,
j'ai modifié quelque peu mon code, le voici :

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
$i=0;
	$a=300;
$demandmess=mysql_query("SELECT * FROM messagerieprivee1");
 
					while(list($id,$exp,$dest,$log1,$clef1,$date,$heure,$login,$cle,$sujet,$content,$statut,$statut1,$archive,$archive1)=mysql_fetch_array($demandmess))
					{
 						?>
 
						<table class="messagerie" id="<?php echo $i;?>" >
 
							<tr>
								<td width="500">
 
                                    <input type="checkbox" id="<?php echo $a;?>" onClick="changeColor();" > <?php echo $sujet;?>
 
								</td>
 
							</tr>
							</table>
 
							<?php
							echo ''.$i.'<br/>';
							echo ''.$a.'<br/>';
							$i=$i+1;
							$a=$a+1;
						}
						?>

et la fonction javascript :

Code :

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
function changeColor()
{
	if(document.getElementById('<?php echo $a;?>').checked == true)
	{
 		document.getElementById('<?php echo $i;?>').style.backgroundColor = '#000000';
	}
 
}
</script>

$i renvoie les valeurs 0,1,2... autant de fois que la boucle se répète
et $a renvoie 300,301,302... donc les variables php sont incrémentées, de plus, j'ai essayé ça sur le checkbox :

Code :

<input type="checkbox" id="<?php echo $a;?>" onClick="document.getElementById('<?php echo $i;?>').style.backgroundColor = '#000000';" > <?php echo $sujet;?>

ça fonctionne, mais simplement, lorsque je décoche la case, la table reste colorée.

Si quelqu'un sait résoudre ça...

[NoSmoking]

Un petit exemple simple pour te montrer le principe, tu oublies dans ta fonction de gérer le cas du non coché, voilà pourquoi rien ne se passe, tu ne fais rien

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
#main{
  width:400px;
  height:400px;
  border:1px solid #ccc;
  background-color:#fff;
}
</style>
</head>
<body>
<div id="main">
<input type="checkbox" onclick="color=this.checked?'#f00':'#fff';document.getElementById('main').style.backgroundColor=color;">change couleur
</div>
</body>
</html>

explication de

Code :

color = this.checked ? '#f00' : '#fff'

SI la checkbox est checked (this.checked) ALORS (?) couleur = '#f00' SINON (:) couleur = '#fff'

[eddflo]

Merci beaucoup pour ta solution NoSmoking, elle marche parfaitement !
Et merci également pour l'explication très claire de ton code, j'en ai bien besoin !
Mais, pour tout dire, je crois que j'ai trop mariné dans le php et maintenant, je peine à penser "objet".