Affichage du résultat d'une fonction dans le HTML

**Cerise74** · 08/06/2020, 13h27

Bonjour,

Je débute en javascript, et je suis en train de créer ma première page internet qui fait appel à des fonctions javascript pour modifier aléatoirement, à chaque actualisation de la page, les valeurs affichées (que ce soit du texte ou des images). J'ai mis toutes les fonctions dans un fichier js à part (de même que le CSS).

J'ai pour l'instant réussi à obtenir ce que je voulais concernant les images et le texte, en revanche je bloque sur l'heure.
J'ai retiré de mon code tout ce qui ne concernait pas ce problème pour essayer d'y voir un peu plus clair, mais je n'arrive pas à trouver ce qui bloque.

Je veux que cela affiche dans le header la date et l'heure actuelles, au format français : ça fonctionne.
Mais j'ai ensuite besoin que cela affiche une période de 24 heures, en affichant l'heure actuelle moins 24h, suivie de l'heure actuelle. Et là, rien ne s'affiche...

Voici mon html :

Code html :

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
<!DOCTYPE html> 
<html> 
 
    <head> 
        <meta charset="utf-8">
        <link href="stylesdebog.css" rel="stylesheet"> 
        <link href="https://fonts.googleapis.com/css2?family=Crete+Round" rel="stylesheet"> 
        <script type="text/javascript" src="fonctionsjsdebog.js"></script>
        <title>test debug</title>
    </head>
 
    <body>
        <header>
            <div class="wrapper">
                <h1> Heure actuelle<br>
                    <div id="dateheure">
                        <script type="text/javascript">
                            window.onload = date_heure('dateheure'); // date heure au moment du rafraîchissement de la page
                        </script>
                    </div>
                </h1>
            </div>
        </header>
 
        <section id="tflasthours">
             <div class="wrapper">
                <h1>24 dernières heures
                 <article>     
                    <div id="dateheurecorps">
                        <script type="text/javascript">
                            window.onload = date_heure('dateheurecorps'); // date heure au moment du rafraîchissement de la page mais ne s'affiche pas !
                        </script>
                    </div>
                    <div id="tfhours">
                        <script type="text/javascript">
                            window.onload = date_heure_tf('tfhours'); // // date heure moins 24 heures au moment du rafraîchissement de la page mais ne s'affiche pas !
                        </script>
                    </div>
                 </article>
                 </h1>
        </div>
        </section>
  </body>
</html>

voici mon fichier js :

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
window.addEventListener("load",function date_heure(dateheure)
{
        var dateheure = document.getElementById("dateheure")
        var date = new Date;
        dateheure.innerHTML = date.toLocaleString();
        //alert(date);
        return true;
});
 
function date_heure_tf(tfhours)
{
        var tfhours = document.getElementById("tfhours")
        dateprev = date;
        alert(dateprev);
        //dateprev = dateprev.setHours(dateprev.getHours()-24);
        //alert(dateprev);
    tfhours.innerHTML = dateprev.toLocaleString();
        return true;
}

Le CSS est inutile, j'ai le même problème avec ou sans mise en forme (ce n'est donc pas un problème d'affichage hors fenêtre).

Comme vous pouvez voir, j'ai essayé de modifier le début de la première fonction (j'ai vu ceci sur un autre post de ce forum), mais cela n'a rien changé. Je n'ai toujours rien d'affiché après "24 dernières heures". Et la fonction date_heure qui s'affiche bien une première fois ne s'affiche pas une deuxième fois.

Il est fort probable que j'aie fait une grossière erreur de débutante, mais je n'arrive pas à la voir !

Si quelqu'un a une idée, je suis preneuse de tout conseil !

Merci d'avance et bonne journée !

**javatwister** · 08/06/2020, 13h58

Envoyé par Cerise74

j'ai ensuite besoin que cela affiche une période de 24 heures, en affichant l'heure actuelle moins 24h, suivie de l'heure actuelle.

Bonjour,

Tu peux clarifier? Parce que là, je ne vois pas le but du truc;

En tout cas, tes window.onload insérés dans le html montrent que tu n'es pas au clair sur le fonctionnement de JS;
Et puis, un window.onload chassant l'autre, n'espère pas que les deux fonctionnent...

**Cerise74** · 08/06/2020, 14h36

Bonjour,

Désolée, effectivement je débute totalement en javascript et je m'autoforme...

Tu peux clarifier? Parce que là, je ne vois pas le but du truc;

En fait, j'ai besoin d'afficher en haut de page l'heure actuelle, puis plus bas un résumé d'activités sur les 24 dernières heures (je voudrais faire un graphe "camembert" qui montrera qu'au cours des 24 dernières heures, l'activité A a été vue pendant x %, la B pendant y%, etc). Or je veux afficher avant ce graphe la période concernée, par exemple : "07/06/2020 14:25 à 08/06/2020 14:25". C'est ça que je n'arrive pas à faire. C'est basique comme données, mais je bloque.

Toutes mes autres fonctions (que je n'ai pas reprises ici) sont aussi appelées par des window.onload. A chaque rafraîchissement de la page, cela change la valeur et l'image de fond de chaque cellule d'un tableau. J'ai donc un certain nombre de window.onload successifs, qui eux, fonctionnent. D'où le fait que je me suis dit que cette façon de faire devait être ok...

**javatwister** · 08/06/2020, 15h01

En fait, ton script peut se résumer à ça:

Code javascript :

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

1
2
3
4
5
window.addEventListener("load",function(){
	const date = new Date;
	document.getElementById("dateheure").innerHTML = date.toLocaleString();
	document.getElementById("tfhours").innerHTML = new Date(date  - 1000*3600*24).toLocaleString();
})

**Cerise74** · 08/06/2020, 15h13

Effectivement c'est plus court !

Du coup, j'ai viré les windows.onload du fichier html, que j'ai remplacés par des appels directs aux identifiants "dateheure" et "tfhours". J'ai maintenant l'heure précédente (tfhours) qui s'affiche, mais je n'ai toujours qu'un seul affichage de l'heure actuelle (le premier).

Code html :

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
<!DOCTYPE html> 
<html> 
 
    <head> 
        <meta charset="utf-8">
        <link href="stylesdebog.css" rel="stylesheet"> 
        <link href="https://fonts.googleapis.com/css2?family=Crete+Round" rel="stylesheet"> 
        <script type="text/javascript" src="fonctionsjsdebog.js"></script>
        <title>test debug</title>
    </head>
 
    <body>
        <header>
            <div class="wrapper">
                <h1> Heure actuelle<br>
                    <div id="dateheure">
                        <script type="text/javascript">
                            dateheure; // date heure au moment du rafraîchissement de la page
                        </script>
                    </div>
                </h1>
            </div>
        </header>
 
        <section id="tflasthours">
             <div class="wrapper">
                <h1>24 dernières heures
                 <article>     
                    <div id="dateheurecorps">
                        <script type="text/javascript">
                            dateheure; // date heure au moment du rafraîchissement de la page mais ne s'affiche pas !
                        </script>
                    </div>
                    <div id="tfhours">
                        <script type="text/javascript">
                            tfhours;// date heure moins 24 heures au moment du rafraîchissement de la page
                        </script>
                    </div>
                 </article>
                 </h1>
        </div>
        </section>
  </body>
</html>

Et merci pour la fonction de calcul de l'heure moins 24 heures ! J'avais essayé de bidouiller une formule, mais comme je n'arrivais pas à l'afficher (même pas avec alert), je n'avais pas pu voir le résultat...

**javatwister** · 08/06/2020, 15h24

Je me répète mais tu ne dois pas insérer de script dans une balise html:

Code html :

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

1
2
3
4
5
<div id="dateheure">
  <script type="text/javascript">// à supprimer
    dateheure; // date heure au moment du rafraîchissement de la page // à supprimer
  </script> // à supprimer
</div>

**Cerise74** · 08/06/2020, 15h44

Ah, ok, désolée. en fait, j'étais partie de cet exemple http://www.supportduweb.com/scripts_...emps-reel.html puis j'ai "brodé"... Mais en laissant la partie <script>.

J'ai donc retiré tous les appels <script> de mon html, sauf celui qui appelle le fichier js dans le head, bien sûr.

Je progresse, cela affiche bien le 2ème item de l'heure actuelle, à condition que je retire le premier, ce qui me semble logique étant donné que je l'appelle avec "id=" or, du coup, cet identifiant n'est plus unique puisque je l'appelle 2 fois sur la même page. Je vais donc creuser de ce côté pour pouvoir avoir 2 fois l'affichage de cette valeur.

**Cerise74** · 09/06/2020, 09h51

C'est bon, j'ai résolu mon souci.

Merci beaucoup pour ton aide !

Bonne journée

Affichage du résultat d'une fonction dans le HTML

JavaScript

Discussions similaires

Partager

Partager