getElementById en boucle

[chuckichucki]

Bonjour !

Je souhaite afficher plusieurs comptes à rebours sur une même page.

J'ai récupéré le bout de code suivant sur un site et je l'ai un peu adapté à mes besoins.

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
 
 
<span id="rebours"></span>
<script type="text/javascript">
<?  
$now = time();
$time_left = $date_fin - $now;
$heure_left = date("G", $time_left );
$minutes_left = date("i", $time_left );
$seconds_left = date("s", $time_left );
?>
 
var secon=<? echo "$seconds_left"; ?> ;//initialise les secondes
var minu=<? echo "$minutes_left"; ?>; //initialise les minutes
var heur=<? echo "$heure_left"; ?>; //initialise les heures
 
function chrono(){
if (secon != 0 || minu != 0 || heur != 0){// si on n'atteind pas 00:00:00
secon--;
if (secon<0){secon=59;
if (minu >0){ minu--}else{minu=59; heur--;}
}
if (secon < 10 ){ secondes = '0'+secon;}else {secondes = secon;}
if (minu < 10 ) {minutes = '0'+minu;}else {minutes = minu;}
if (heur < 10 ) {heures = '0'+heur;}else {heures = heur;}
document.getElementById('rebours').innerHTML = heures+' heures '+minutes+' minutes '+secondes+' secondes ' ;
compte=setTimeout('chrono()',1000) //la fonction est relancée tous les secondes
}
}
chrono();
</script>

Le premier compte à rebours s'affiche bien !

Mais les suivants ne s'affichent pas. J'ai sûrement un souci au niveau de l'id. En effet, tous mes <span> contenant le compte à rebours ont le même id.

Comment faire pour :
- donner un id différent à chacun de mes spans
- appeler la fonction qu'une seule fois chrono
- mettre le tout dans une boucle php (en effet, la date de fin de mon compte à rebours provient d'une requête MySQL)

J'espère que mon problème est clair. Par avance, merci de votre aide et bon WE

[javatwister]

Code :

document.getElementById('rebours').innerHTML = heures+' heures '+minutes+' minutes '+secondes+' secondes ' ;

cette ligne affichera le chrono dans un élément et un seul;

évidemment, empresse-toi de changer l'id des autres span...
et boucle sur tous les éléments appelés "rebours0", "rebours1", etc. pour y afficher le même contenu;

[chuckichucki]

Merci javatwister.

J'ai fait ce que tu m'as dit et cela fonctionne bien, tous les comptes à rebours s'affichent. Chaque <span id=rebours> prend une valeur différente du genre rebours1, rebours2 etc.

Mais il me reste un souci : chaque compte à rebours affiche le même temps restant ! Alors que bien évidemment ils devraient afficher des temps restants différents.


Le problème se situe sûrement dans cette partie du code, qui initialise les variables

Code :

1
2
3
4
 
var secon=<? echo "$seconds_left"; ?> ;//initialise les secondes
var minu=<? echo "$minutes_left"; ?>; //initialise les minutes
var heur=<? echo "$heure_left"; ?>; //initialise les heures

Ces variables valeurs proviennent d'une table contenant le temps restant pour différentes entrées.

Elles sont ensuite appelées dans la fonction chrono.

Du coup, comment appeler la fonction chrono avec des valeurs différentes, sans dupliquer 50 fois la fonction chrono (genre chrono1, chrono2 etc.) ?

Par avance, merci

[javatwister]

forcément, il va te falloir boucler sur les données de la table pour que chaque timer soit correctement affiché;
donc, débrouille-toi pour ressortir un tableau $time_left ;

[chuckichucki]

Merci javatwist

Ok j'ai mis $time_left en tableau et mis en place une boucle

Voici ce que j'ai sur ma page en code source maintenant (je te mets les 2 premières boucles)

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
 
<span id="rebours0"></span>
<span id="rebours1"></span>	
 
<script type="text/javascript">
 function chrono(){
 
 
var secon0=31 ;//initialise les secondes
var minu0=52; //initialise les minutes
var heur0=14; //initialise les heures
 
if (secon0 != 0 || minu0 != 0 || heur0 != 0){// si on n'atteind pas 00:00:00
	secon0--;
	if (secon0<0){secon0=59;
	if (minu0 >0){ minu0--}else{minu0=59; heur0--;}
}
if (secon0 < 10 ){ secondes0 = '0'+secon0;}else {secondes0 = secon0;}
if (minu0 < 10 ) {minutes0 = '0'+minu0;}else {minutes0 = minu0;}
if (heur0 < 10 ) {heures0 = '0'+heur0;}else {heures0 = heur0;}
 
document.getElementById('rebours0').innerHTML = heures0+' heures '+minutes0+' minutes '+secondes0+' secondes ' ;
compte=setTimeout('chrono()',1000) //la fonction est relancée tous les secondes
 
var secon1=31 ;//initialise les secondes
var minu1=52; //initialise les minutes
var heur1=14; //initialise les heures
 
if (secon1 != 0 || minu1 != 0 || heur1 != 0){// si on n'atteind pas 00:00:00
	secon1--;
	if (secon1<0){secon1=59;
	if (minu1 >0){ minu1--}else{minu1=59; heur1--;}
}
if (secon1 < 10 ){ secondes1 = '0'+secon1;}else {secondes1 = secon1;}
if (minu1 < 10 ) {minutes1 = '0'+minu1;}else {minutes1 = minu1;}
if (heur1 < 10 ) {heures1 = '0'+heur1;}else {heures1 = heur1;}
 
document.getElementById('rebours1').innerHTML = heures1+' heures '+minutes1+' minutes '+secondes1+' secondes ' ;
compte=setTimeout('chrono()',1000) //la fonction est relancée tous les secondes
 
}
}
chrono();
</script>

Mais rien ne s'affiche. Je n'arrive pas à trouver mon erreur, merci de ton aide.

[NoSmoking]

Bonjour,

Mais rien ne s'affiche. Je n'arrive pas à trouver mon erreur, merci de ton aide.

commence pas une bonne indentation de ton code pour te rendre compte que la fonction n'est jamais lancée.

De plus sans aller plus loin

Code :

1
2
3
4
5
6
 
function chrono() {
  var secon0 = 31; //initialise les secondes
  var minu0 = 52; //initialise les minutes
  var heur0 = 14; //initialise les heures
  if (secon0 != 0 || minu0 != 0 || heur0 != 0) { // si on n'atteind pas 00:00:00

ceci rend ton code statique puisque tu réinitialises les variables en début de fonction.

Entre autres...

[Eric2a]

Salut,

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
 
function chrono(){
	if(typeof this.TimeLeft =='undefined'){
		this.TimeLeft=new Array();
		this.TimeLeft[0]=new Array( 0, 0, 5);	// Chrono #1
		this.TimeLeft[1]=new Array(23,59,59);	// Chrono #2
	}
	var h,m,s,i,heures,minutes,secondes;
	var Fini=true;
 
	for(i=0;i<this.TimeLeft.length;i++){
		h=this.TimeLeft[i][0];
		m=this.TimeLeft[i][1];
		s=this.TimeLeft[i][2];
		if((h+m+s)>0){
			Fini=false;	// Le chrono #i n'a pas atteint 00:00:00
			s--;
			if(s<0){
				s=59;
				m--;
				if(m<0){
					m=59;
					h--;
					this.TimeLeft[i][0]=h;
				}
				this.TimeLeft[i][1]=m;
			}
			this.TimeLeft[i][2]=s;
		}
 
		heures  =((h<10)?'0':'')+h;
		minutes =((m<10)?'0':'')+m;
		secondes=((s<10)?'0':'')+s; 
		document.getElementById('rebours'+i).innerHTML = heures+' heures '+minutes+' minutes '+secondes+' secondes';
	}
 
	if(!Fini)setTimeout('chrono()',1000); // Relancer la fonction après une seconde
}

Pour l'initialisation des valeurs, le code PHP (dans une boucle) ressemblerait à ceci...

Code :

echo 'this.TimeLeft['.$i.']=new Array('.$heure_left.','.$minutes_left.','.$seconds_left.");\n";