Javascript afficher une var Résolu/Fermé

Question

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 =) 

Configuration: Windows 3.1 / DesMaster 350

Groarh · Answer

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 ;)

henri93 · Answer

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 ^^)

Javascript afficher une var

2 réponses

Discussions similaires