Javascript afficher une var
Résolu
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 =)
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
-
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 ^^)
-
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 ;)
