Discussion :

[leara500]

Bonjour,

Désolée de vous déranger avec çà, la veille du réveillon, mais je suis coincée.

Je développe une application de gestion des horaires et je souhaiterai savoir comment changer la valeur d'un font color en fonction d'un résultat.

J'ai une fonction javascript qui me permet de calculer l'horaire hebdomaire pour une personne donnée

Code javascript

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
 
function doCount2(position){
	//alert("position : "+position);
	//RECUPERATION DES INDEX ET ID PERSONNE
	var chaine = position;
	var tableau=chaine.split("_");
	var index = tableau[0];
	var idPersonne = tableau[1];
	//alert("abs param : "+abs);
 
	var variableNbHeureAfaire = "nbHeureAfaire_"+idPersonne;
	var nbHeureAFaire = document.forms["createForm"].elements[variableNbHeureAfaire].value;
 
 
	var res = 0;
	for (i=1; i<8; i++){
 
		var pres = 'pres'+i+"_"+idPersonne;
		var demiAbs = 'demiab'+i+"_"+idPersonne;
		var abs = 'ab'+i+"_"+idPersonne;
 
		var nomPres = document.getElementById(pres);	
		var demiAbs = document.getElementById(demiAbs);	
		var abs = document.getElementById(abs);	
 
		var debutAM = 'horaire'+i+'dm_'+idPersonne;
		var finAM = 'horaire'+i+'fm_'+idPersonne;
		var debutPM = 'horaire'+i+'da_'+idPersonne;
		var finPM = 'horaire'+i+'fa_'+idPersonne;
 
		//R2cupération des id des absences sélectionné
		var absenceSelectedId = "absenceSelected"+i+"_"+idPersonne;
		var idAbs = document.getElementById(absenceSelectedId).options[document.getElementById(absenceSelectedId).selectedIndex].value;
 
		//alert("abs : "+i+" - "+abs.checked);
		//alert("idAbs : "+idAbs);
 
		//Gestion des demi-absence matin ou après midi
		var horaireApresdebDemiAbs = "horaire"+i+"debApresDemiAbs_"+idPersonne;
		var horairApresfinDemiAbs = "horaire"+i+"finApresDemiAbs_"+idPersonne
		var horaireMatindebDemiAbs = "horaire"+i+"debMatinDemiAbs_"+idPersonne;
		var horairMatinfinDemiAbs = "horaire"+i+"finMatinDemiAbs_"+idPersonne
 
		var debutDemiAbs = '';
		var finDemiAbs = '';
 
		//Durée de l'absnece
		var dureeAbs='';
 
		if(document.getElementById(horaireApresdebDemiAbs)!=null){ 
			debutDemiAbs = horaireApresdebDemiAbs;
 
			//alert("horaireApresdebDemiAbs");
		}
		if(document.getElementById(horairApresfinDemiAbs)!=null){ 
			finDemiAbs = horairApresfinDemiAbs;
 
			//alert("horairApresfinDemiAbs");
		}
 
		if(document.getElementById(horaireMatindebDemiAbs)!=null){ 
			debutDemiAbs = horaireMatindebDemiAbs;
 
			//alert("horaireMatindebDemiAbs");
		}
 
		if(document.getElementById(horairMatinfinDemiAbs)!=null){
			finDemiAbs = horairMatinfinDemiAbs;
 
			//alert("horairMatinfinDemiAbs");
		}
 
		if(nomPres.checked){
			debutDemiAbs = '';
			finDemiAbs = '';
 
		}
 
 
		//alert("debutDemiAbs : "+debutDemiAbs);						
		var debutAM_value = document.getElementById(debutAM).value;
		//alert("debutDemiAbs : "+debutDemiAbs);
		//alert("finDemiAbs : "+finDemiAbs);
 
		var finAM_value = document.getElementById(finAM).value;
		var debutPM_value = document.getElementById(debutPM).value;
		var finPM_value = document.getElementById(finPM).value;
 
		var debutDemiAbs_value = "00:00";
		//alert("document.getElementById(debutDemiAbs) : "+document.getElementById(debutDemiAbs));
 
		// Modification ici
		if(document.getElementById(debutDemiAbs)!=null){ 
 
			debutDemiAbs_value = document.getElementById(debutDemiAbs).value;
 
 
		}
 
		//alert("Existnate : "+document.getElementById(debutDemiAbs_value));
 
		var finDemiAbs_value = "00:00";
		//alert("document.getElementById(finDemiAbs).value ====> "+document.getElementById(finDemiAbs).value);
 
		if(document.getElementById(finDemiAbs)!=null){ 
			//alert("Ma variable finDemiAbs est defini");
			if(document.getElementById(finDemiAbs).value){
			finDemiAbs_value = document.getElementById(finDemiAbs).value;
			//alert("DEMI Fin : "+finDemiAbs_value);
			}
		}
 
		if(debutAM_value == ''){
			debutAM_value = '00:00';
		}
 
		var debutAM_temps = debutAM_value.split(':');
		var debutAM_heure = debutAM_temps[0];
		var debutAM_min = debutAM_temps[1];
 
		var debutAM_min_res = (parseInt(debutAM_heure*60))+parseInt(debutAM_min);
 
		if(finAM_value == ''){
			finAM_value = '00:00';
		}
 
		var finAM_temps = finAM_value.split(':');
		var finAM_heure = finAM_temps[0];
		var finAM_min = finAM_temps[1];
 
		var finAM_min_res = (parseInt(finAM_heure*60))+parseInt(finAM_min);
		//alert('finAM_min_res : '+finAM_min_res);
 
		//calcul du temps effectué le matin en min
		var totalAM_min = finAM_min_res - debutAM_min_res;
 
		if(debutPM_value == ''){
			debutPM_value = '00:00';
		}
 
		var debutPM_temps = debutPM_value.split(':');
 
		var debutPM_heure = debutPM_temps[0];
		var debutPM_min = debutPM_temps[1];
 
		var debutPM_min_res = (parseInt(debutPM_heure*60))+parseInt(debutPM_min);
 
 
		if(finPM_value == ''){
			finPM_value = '00:00';
		}
 
		var finPM_temps = finPM_value.split(':');
		var finPM_heure = finPM_temps[0];
		var finPM_min = finPM_temps[1];
 
		var finPM_min_res = (parseInt(finPM_heure*60))+parseInt(finPM_min);
 
		//calcul du temps effectué l'apres midi en min
		var totalPM_min = finPM_min_res - debutPM_min_res;
 
		if(debutDemiAbs_value == ''){
			debutDemiAbs_value = '00:00';
		}
 
		var debutDemiAbs_temps = debutDemiAbs_value.split(':');
		var debutDemiAbs_heure = debutDemiAbs_temps[0];
		var debutDemiAbs_min = debutDemiAbs_temps[1];
 
		var debutDemiAbs_min_res = (parseInt(debutDemiAbs_heure*60))+parseInt(debutDemiAbs_min);
 
		if(finDemiAbs_value == ''){
			finDemiAbs_value = '00:00';
		}
 
		var finDemiAbs_temps = finDemiAbs_value.split(':');
		var finDemiAbs_heure = finDemiAbs_temps[0];
		var finDemiAbs_min = finDemiAbs_temps[1];
 
		var finDemiAbs_min_res = (parseInt(finDemiAbs_heure*60))+parseInt(finDemiAbs_min);
 
 
 
		if(nomPres.checked){
			finDemiAbs_min_res = '';
			debutDemiAbs_min_res = '';
 
		}
 
		//Gestion des absences
 
		if(abs.checked){
			//alert("abs coché")
			//Si on est pas dans le cas d'un repos : l'id du repos est 3
			if((idAbs !=3)&&(idAbs !=-1)){
				/*alert("nbHeureAFaire "+nbHeureAFaire);
				nbHeureAFaire =(parseInt(nbHeureAFaire);
				alert("nbHeureAFaire 2 "+nbHeureAFaire);*/
				dureeAbs = nbHeureAFaire/5;
				//alert("Valeur de la durée de l'absence : "+dureeAbs);
			}
 
		}
 
 
 
		//calcul du temps effectué durant la demi absence en min
		var totalDemiAbs_min = finDemiAbs_min_res - debutDemiAbs_min_res;
 
 
		//Calcule de la valeur de l'absence    dureeAbs
		var dureeAbs_min = (parseInt(dureeAbs*60));
		//alert("dureeAbs_min_res : "+dureeAbs_min_res);
 
 
 
 
		//calcul total de l'heure effectué
		//alert("*** totalPM_min *** :"+totalPM_min);
		//alert("*** dureeAbs_min_res *** :"+dureeAbs_min);
		//alert("*** parseInt(totalPM_min) *** :"+parseInt(totalPM_min));
 
		var total_Global_min = parseInt(totalAM_min) + parseInt(totalPM_min) + parseInt(totalDemiAbs_min) + parseInt(dureeAbs_min) ;
 
 
		//alert("*** total_Global_min *** :"+total_Global_min);
		/*alert('totalAM_min '+i+' : '+totalAM_min);
		alert('totalPM_min '+i+' : '+totalPM_min);
		alert('totalDemiAbs_min '+i+' : '+totalDemiAbs_min);
		alert('dureeAbs_min '+i+' : '+dureeAbs_min);
		alert('total_Global_min '+i+' : '+total_Global_min);
		*/
		res += total_Global_min;
		/*var total_Global_heure = Math.floor(total_Global_min/60)+":"+(total_Global_min%60);
		alert('totalAM_min : '+total_Global_heure);*/
	}
	var heure_res = Math.floor(res/60);
	if (heure_res == 0 || heure_res < 10) heure_res = "0"+heure_res;
	var min_res = (res%60);
	if (min_res == 0 || min_res < 10) min_res = "0"+min_res;
 
	var total_Global_heure_sem = heure_res+":"+min_res;
	//alert('total_Global_heure_sem : '+total_Global_heure_sem);
 
	var styleCSS="styleCSS";
 
	//Pour mettre en rouge 
	if (nbHeureAFaire != total_Global_heure_sem){
 
		//document.getElementById(styleCSS).value = total_Global_heure_sem;
		document.getElementById(styleCSS).innerHTML= 'style : "background-color:#FF3300" ';
 
 
	}
 
 
	var champCache = 'nbHeureFaite_'+idPersonne;
	document.getElementById(champCache).value = total_Global_heure_sem;
 
	var div_res = 'div_nbHeureFaite_'+idPersonne;
	document.getElementById(div_res).innerHTML= total_Global_heure_sem;
 
}

code jsp

Code :

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

1
2
3
4
 
Heures effectives : <br>
	<input type="hidden" name="nbHeureFaite_<s:property value='%{personneDto.idPersonne}'/>" id="nbHeureFaite_<s:property value='%{personneDto.idPersonne}'/>" value=''>
	<div id="div_nbHeureFaite_<s:property value='%{personneDto.idPersonne}'/>" > 0 heures</div>

Ce que je souhaiterai faire, c'est que la couleur des caractères de ma div "div_nbHeureFaite_<s:property value='%{personneDto.idPersonne}'/>" soit rouge si le résultat des heures calculer est différents des heures contractuelle

Code :

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

1
2
3
4
5
6
7
8
 
if (nbHeureAFaire != total_Global_heure_sem){
 
		//document.getElementById(styleCSS).value = total_Global_heure_sem;
		document.getElementById(styleCSS).innerHTML= 'style : "background-color:#FF3300" ';
 
 
	}

Mais çà ne marche pas.... Auriez vous des suggestions ? Merci de votre aide

[javan00b]

T'as essayé

Code :

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

document.getElementById(styleCSS).style.color = "red";

[NoSmoking]

Bonjour,
as tu simplement compris la signification de ce que tu as écris ici ?

Code :

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

document.getElementById(styleCSS).innerHTML= 'style : "background-color:#FF3300" ';

[leara500]

NoSmoking> Oui, mais je ne savais pas comment m'y prendre pour l'avoir en rouge u_u

javan00b > Génial, c'est Exactement çà. Merci ^!!!!