Impossible de changer la couleur du text en javascript

Version imprimable

12/10/2015, 08h58
zozotitou

2 pièce(s) jointe(s)

Impossible de changer la couleur du text en javascript

Bonjour à tous,

J'ai une page web et un script JS, et je voudrai changer la couleur du texte qui change quand je clique desus.

j'ai 2 texte :
Allumé, je vous qui passe en vert.
Éteint, je veux qui passe en rouge.

Je les 2 fichiers : ci-joint

Merci de votre aide.
12/10/2015, 09h19
SpaceFrog

il tes suffit soit de modifier le .style.color ou d'avoir deux class css, un poru chaque état, d'attribuer un class css lors du click ...
c'est pas dans la FAQ ça ?
12/10/2015, 09h24
zozotitou

Merci pour, mais je ne sais pas comment le mettre, j'ai récupérer le JS d'un collègue mais je suis débutant en JS. Ou je peux trouver ces informations.
Merci de ton aide
cdlt
12/10/2015, 09h46
SpaceFrog

http://fiddle.jshell.net/de66ka4r/
12/10/2015, 10h05
zozotitou

Merci pour ton exemple, mais je n'arrive pas à change texte, on change que la couleur
merci de ton aide !!!Je l'ai intégré dans JS , il ne change pas me couleur ?????????????????
12/10/2015, 10h14
SpaceFrog

Pour le texte c'est le innerHTML ..
https://jsfiddle.net/de66ka4r/3/

Merci j'ai réussi mais je dois mettre à chaque fois les script pour chaque en changeant le id, il n'y a pas de mettre un script générique (ou le mettre dans fichier JS) pour faire le changement pour chaque commande,

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
57
58
59
60
61
 
<!DOCTYPE html>
<html lang="fr">
	<head>
		<title>Gestion des lumières extérieures</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<meta name="robots" content="noindex" />
		<!--<script src="test1.js" type="text/javascript"></script>-->
		<script>
		document.getElementById('foo').onclick= function(){
			var on=getComputedStyle(this, null).color=="rgb(255, 0, 0)";
			this.style.color=on?"green":"red";
			this.innerHTML=on?"Allumé":"Éteint";
		};
		</script>
	</head>
 
	<body bgcolor="#FFFFFF">
		<h1>Gestion des lumières extérieures</h1>
 
		<table width="180" border="1" cellspacing="0" cellpadding="4" bordercolor="#000000">
			<tr> 
				<td>Allée</td>
				<!--<td></td>-->
				<td>
					<center>
						<strong> 
							<div   id="foo" class="off">On</div>
							<script>
								document.getElementById('foo').onclick= function(){
									var on=getComputedStyle(this, null).color=="rgb(255, 0, 0)";
									this.style.color=on?"green":"red";
									this.innerHTML=on?"Allumé":"Éteint";
								};
							</script>
						</strong> 
					  </center>
				</td>
			</tr>
			<tr> 
				<td>Porche</td>
				<!--<td></td>-->
				<td>
					<center>
						<strong> 
							<div   id="foo1" class="off">On</div>
							<script>
								document.getElementById('foo1').onclick= function(){
									var on=getComputedStyle(this, null).color=="rgb(255, 0, 0)";
									this.style.color=on?"green":"red";
									this.innerHTML=on?"Allumé":"Éteint";
								};
							</script>
						</strong> 
					  </center>
				</td>
			</tr>
 
		</table>
	</body>
</html>

Je mets le code HTML.
Peux-tu vois merci
Cdlt

12/10/2015, 10h45
SpaceFrog

Jquery te simplifierait la tache ...
12/10/2015, 10h53
zozotitou

Je n'ai aucune connaissance de JQUERY.
Et de plus j'ai besoin de 3 positions sur certaines commandes .
cdlt
12/10/2015, 11h26
SpaceFrog

Jquery = javascript ...

sinon pour factoriser tes attributions de click il suffit de faire une fonction sur le onload
https://jsfiddle.net/de66ka4r/4/

ensuite si tu as différents états pour chaque élément, tu pourrais les stocker les différents texte et couleurs au niveau même de l'élément dans des attributs data
12/10/2015, 11h27
zozotitou

Merci je regarde et je te tiens au courant
Cdlt