Javascript afficher une var

Résolu
henri93 Messages postés 52 Statut Membre -  
henri93 Messages postés 52 Statut Membre -
Bonjour,

Je suis actuellement en train d'essayer de faire un site web pour le loisir avec une horloge, tout ce qu'il y a de plus banal, mais j'ai de rencontré un problème majeur :

comment on affiche une variable en javascript ?

voilà mon code :

function date() {
var seconde;
var minute;
var heure;
var calcul;

seconde = getSeconds();
minute = getMinutes();
heure = getHours();

calcul = heure + ':' + minute + ':' + seconde;
}

je voudrai afficher le résultat de calcul dans une division d'id "clock"

et si il y a des erreurs n'oubliez pas de me le signaler merci =)

2 réponses

  1. Groarh Messages postés 706 Statut Membre 185
     
    Salut,

    les mécanismes de JavaScript ne sont pas évidents à comprendre au début. Il faut comprendre que la navigateur a plusieurs tâches bien distinctes à gérer, dont les trois suivantes :
    1/ faire tourner JavaScript
    on parle d'interpréteur, par exemple l'interpréteur JavaScript de Firefox est SpiderMonkey.
    2/ afficher le HTML
    c'est le rôle du moteur de rendu (rendering engine en anglais), celui de Firefox s'appelle Gecko.
    3/ permettre au JavaScript de manipuler le HTML
    il génère un ensemble d'objets JavaScript correspondant aux éléments HTML, c'est ce qu'on appelle le Document Object Model (DOM).

    Quand on commence à toucher au DOM, la première chose qu'on apprend c'est la fonction getElementById. Un exemple :

    var clockDiv = document.getElementById('clock');


    Tu as maintenant un objet JavaScript nommé clockDiv, qui est de type HTMLDivElement (t'es pas obligé de retenir :P), et qui fournit diverses méthodes pour le manipuler.

    Il y a la propriété innerHTML, facile à utiliser. Je déconseille de l'utiliser, mais quand on débute, on ne va pas se prendre la tête. Voici le code qui répond à ta question :

    var clockDiv = document.getElementById('clock'); 
    clockDiv.innerHTML = calcul;


    Pour info, une méthode plus « propre » :

    var clockDiv = document.getElementById('clock'); 
    
    // je récupère le contenu de la div 
    var content = clockDiv.firstChild; 
    
    // la première fois, la div est vide, il faut vérifier 
    if (!content) { 
    
        // j'insère un nouveau noeud #text 
        var text = document.createTextNode(calcul); 
        clockDiv.appendChild(text); 
    
    } else { 
    
        // je modifie le noeud #text existant 
        content.data = calcul; 
    
    }

    Tu comprends pourquoi je te conseille d'utiliser innerHTML dans un premier temps ;)
    1
  2. henri93 Messages postés 52 Statut Membre 4
     
    Merci pour ta réponse cela m'a était très utile =) je pense finir de lire le site du zéro (enfin la partie javascript bien entendu ^^)
    0