onload / innerHTML

**spirzouf** · 15/04/2013, 17h56

Bonjour,

Je ne trouve pas mon erreur sur un script sensé afficher la date et l'heure avec actualisation en temps réel.
Je me suis inspiré d'une FAQ de ce site ainsi que d'un billet de blog présentant un code similaire :

Fichier index.html :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
	<head>
		<title>Affichage heure temps réel</title>
		<script type="text/javascript" src="datetime.js"></script>
	</head>
	<body onLoad="DateTime('heure');">
		<p id="heure">L heure doit s afficher ici</p>
	</body>
</html>

fichier datetime.js :

Code javascript :

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
function DateTime(id) {
 
    var date 	= new Date();
 
    var AAAA 	= date.getFullYear();
    var MM 		= date.getMonth();
    var JJ 		= date.getDate();
    var jour 	= date.getDay();
    var heure 	= date.getHours();    	
    var min 	= date.getMinutes();    
    var sec 	= date.getSeconds();   
 
    if (heure < 10) { heure = "0" + heure; }
    if (min   < 10) { min   = "0" + min;   }
    if (sec   < 10) { sec   = "0" + sec;   }
 
    var tab_jours = new Array('Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam');
    var affichage = tab_jour[JJ]+'. '+JJ+' '+MM+' '+AAAA+' '+heure+':'+min+':'+sec;
    document.getElementById(id).innerHTML = affichage;
    setTimeout('datetime('+id+')',1000);
}

Seul le texte "L'heure doit s'afficher ici" apparait...
Idem en passant par window.onload = ...

J'imagine que le problème doit être gros comme une maison, mais je ne vois pas (NB: javascript est bien activé et fonctionnel).

Merci d'avance pour l'aide apportée

**Lorenzo77** · 15/04/2013, 18h03

salut,

minuscule et majuscule ... regarde dans ta console tu verras les erreurs

**Bovino** · 15/04/2013, 18h04

Une première piste :

Code :

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

function DateTime(id)

Code :

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

setTimeout('datetime('+id+')',1000);

JavaScript est sensible à la casse !

Mais sinon, il y a plus simple

Code :

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

1
2
3
4
function DateTime(){
    document.getElementById('heure').innerHTML = new Date().toLocaleString();
    setTimeout(DateTime, 1000);
}

**spirzouf** · 15/04/2013, 22h19

Merci pour vos réponses.
Chkreungneugneu de casse...

Mais malheureusement, il n'y avait pas que cela...
Merci aussi de m'avoir rappelé que j'avais une console d'erreur dans Firebug ! J'ai ainsi pu trouver les autres erreurs

En revoyant le code, je me suis dit aussi que l'appel récursif dans la fonction DateTime() n'était peut-être pas le mieux, donc je l'appelle désormais avec un setInterval.

Voici le code final (ça intéressera peut-être certains qui tomberont là dessus) :

Fichier index.html :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
	<head>
		<title>Affichage heure temps réel</title>
		<script type="text/javascript" src="datetime.js"></script>
	</head>
	<body onLoad="DateTime('heure');">
		<p id="heure">L heure doit s afficher ici</p>
	</body>
</html>

Fichier datetime.js :

Code javascript :

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
function DateTime(id) {
	setInterval('Clock("'+id+'")',1000);
}
 
function Clock(id) {
 
    var date 	= new Date();
 
    var AAAA 	= date.getFullYear();
    var MM 	= date.getMonth() + 1;
    var JJ 	= date.getDate();
    var jour 	= date.getDay();
    var heure 	= date.getHours();    	
    var min 	= date.getMinutes();    
    var sec 	= date.getSeconds();   
 
    if (heure < 10) { heure = "0" + heure; }
    if (min   < 10) { min   = "0" + min;   }
    if (sec   < 10) { sec   = "0" + sec;   }
 
    var tab_jours = new Array('Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam');
    var affichage = tab_jours[jour]+'. '+JJ+'-'+MM+'-'+AAAA+' '+heure+':'+min+':'+sec;
    document.getElementById(id).innerHTML = affichage;
}

onload / innerHTML

JavaScript

Discussions similaires

Partager

Partager