begin process at 2012 05 29 13:23:55
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Passage de variables du javascript vers du html avec du code externe


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Passage de variables du javascript vers du html avec du code externe

jeudi 10 juin 2010 à 10:18:41 | Passage de variables du javascript vers du html avec du code externe

jytest

Bonjour,

Comme je débute en javascript, j'ai sûrement fait la ou les erreur(s) du débutant.
Pouvez-voyus m'aider ?

J'ai un fichier "heure_date.js" dans le répertoire "Scripts" à la racine du site.
De ce code javascript, je dois repêcher le jour (part01) pour la balise HTML "journee"
et aussi l'heure (part02) pour la balise HTML "heure"... cela se trouve en fin de code html.

Vous constaterez que je fais plusieurs appels de fonctions js dans le code en interne ou en externe. Mais pour l'heure et date cela foire. Pourquoi?

Outre le problème qu'il devrait y avoir pour part01 et part02 (peut-être ?),
J'ai tout essayé depuis 2 jours, on dirait même que cela n'est même pas exécuté

Pouvez-vous m'aider à y voir plus clair ?


Voici le code javascript :
// JavaScript Document
function date_heure(id)
{
date = new Date;
annee = date.getFullYear();
moi = date.getMonth();
mois = new Array('Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre');
j = date.getDate();
jour = date.getDay();
jours = new Array('Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi');
h = date.getHours();
if(h<10) {
h = "0"+h;
}
m = date.getMinutes();
if(m<10) {
m = "0"+m;
}
s = date.getSeconds();
if(s<10) {
s = "0"+s;
}
part01 = 'Nous sommes le '+jours[jour]+' '+j+' '+mois[moi]+' '+annee;
part02 = h+':'+m+':'+s;
resultat = 'Nous sommes le '+jours[jour]+' '+j+' '+mois[moi]+' '+annee+' il est '+h+':'+m+':'+s;
document.getElementById(id).innerHTML = resultat;
setTimeout('date_heure("'+id+'");','1000');
return true;
}






Et voilà le code HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>creaprint creaprint.be sitecreaprint.be creation impression webdesign www.creaprint.be www.sitecreaprint.be florence vandoorne deportes estaimpuis belgique statistique mensuelle</title>
<style type="text/css">
<!--
#entete {
height: 148px;
width: 945px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
#contenu {
height: 475px;
width: 945px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
#pied a infos {
padding: 0px;
height: 97px;
width: 120px;
position: static;
left: 40px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
#pied {
height: 97px;
width: 945px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
background-image: url(images/pied_site.gif);
}
#pied table {
margin: 0px;
padding: 0px;
height: 97px;
width: 945px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
#site {
width: 945px;
height: 720px;
margin-top: 5px;
margin-left: -472px;
position: absolute;
left: 50%;
}
body {
background-color: #000;
}
#site #contenu {
background-image: url(images/contenu_tout_vide.gif);
}
#site #contenu h2 {
margin-top: 0px;
color: #069;
width: 885px;
padding-left: 60px;
position: relative;
}
h1,h2,h3,h4,h5,h6 {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
}
body,td,th {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
}
#detail {
height: 350px;
margin-top: 0px;
margin-left: 60px;
width: 845px;
}
#titrestats {
height: 25px;
width: 300px;
position: absolute;
z-index: 10;
left: 600px;
top: 200px;
font-size: 16px;
font-weight: bold;
text-align: right;
font-style: oblique;
color: #009;
}
#ligne_detail {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
}
#cadretitre { position: absolute;
left: 60px;
top: 162px;
z-index: 2;
}
#statjour {
height: 24px;
width: 152px;
position: absolute;
z-index: 3;
left: 100px;
top: 534px;
}
#statmois {
height: 24px;
width: 152px;
position: absolute;
z-index: 3;
left: 100px;
top: 564px;
}
#statan {
height: 24px;
width: 152px;
position: absolute;
z-index: 3;
left: 100px;
top: 594px;
}
#graphique {
height: 310px;
width: 840px;
position: absolute;
left: 60px;
top: 220px;
}
#journee {
height: 16px;
width: 300px;
position: absolute;
z-index: 3;
left: 550px;
top: 595px;
font-size: 11px;
text-align: right;
}
#heure {
height: 16px;
width: 50px;
position: absolute;
z-index: 3;
left: 855px;
top: 595px;
font-size: 11px;
font-style: normal;
text-align: left;
}
-->
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script src="Scripts/date_heure.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
image0 = new Image(400,0)
image0.src = "images/null_on_null_hover_1.gif"

image1 = new Image(400,0)
image1.src = "images/null_on_accueil_hover_1.gif"

image2 = new Image(400,0)
image2.src = "images/null_on_crea_hover_1.gif"

image3 = new Image(400,0)
image3.src = "images/null_on_imp_hover_1.gif"

image4 = new Image(400,0)
image4.src = "images/null_on_web_hover_1.gif"

var nava = (document.layers);
var dom = (document.getElementById);
var iex = (document.all);
if (nava) { cach = document.cache }
else if (dom) { cach = document.getElementById("cache" ).style }
else if (iex) { cach = cache.style }
largeur = screen.width;
cach.left = Math.round((largeur/2)-200);
cach.visibility = "visible";

function cacheOff() {
cach.visibility = "hidden";
}
function zoomin01() {
document.menu.src = image1.src; return true;
}
function zoomin02() {
document.menu.src = image2.src; return true;
}
function zoomin03() {
document.menu.src = image3.src; return true;
}
function zoomin04() {
document.menu.src = image4.src; return true;
}
function original() {
document.menu.src = image0.src; return true;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
</head>

<body onload "date_heure()">
<div id="site">
<div id="entete"><a href="index.html"><img src="images/logo_creaprint.gif" alt="logo" width="400" height="148" border="0"></a><img name="menu" src="images/null_on_null_hover_1.gif" alt="menu" width="545" height="148" border="0" usemap="#Map">
<map name="Map">
<area shape="poly" coords="57,126,77,111,94,101,111,92,128,83,147,73,163,66,180,59,197,52,213,46,229,40,246,35,259,31,271,28,283,25,294,21,304,19,318,16,333,13,344,10,359,7,371,4,378,3,330,3,310,5,293,7,272,11,252,15,232,18,215,22,193,26,168,33,148,38,126,45,104,53,86,59,71,65,55,74,43,79,30,85" href="index.html" alt="menu_accueil"
onMouseOver="zoomin01()" onMouseOut="original()" />
<area shape="poly" coords="388,4,338,22,325,26,312,31,297,36,284,43,270,49,259,56,247,62,236,69,222,77,208,86,195,95,184,103,171,113,161,121,151,131,141,141,131,128,118,114,104,101,123,90,150,77,178,64,203,54,231,45,257,37,281,30,303,24,326,18,342,14" href="creation00.html" alt="menu_creation"
onMouseOver="zoomin02()" onMouseOut="original()" />
<area shape="poly" coords="195,102,207,115,217,125,227,138,239,126,249,116,259,108,269,101,278,94,288,87,298,80,308,73,318,67,328,62,338,56,352,49,359,45,379,36,386,33,403,25,413,21,424,17,439,11,451,7,460,4,402,4,383,10,368,15,354,20,337,26,321,32,309,37,293,44,277,52,262,60,246,69,225,81" href="impression00.html" alt="menu_impression"
onMouseOver="zoomin03()" onMouseOut="original()" />
<area shape="poly" coords="304,137,317,123,327,114,338,105,350,96,360,88,370,81,380,74,392,67,404,61,413,55,425,49,435,43,445,38,458,30,469,24,480,19,493,13,503,7,510,3,468,3,452,10,436,16,419,22,403,29,389,36,378,41,368,46,355,53,343,59,332,65,322,71,311,78,302,84,291,91,283,96,274,102" href="web00.html" alt="menu_webdesign"
onMouseOver="zoomin04()" onMouseOut="original()" />
</map>
</div>
<div id="contenu">
<h2><br>Statistiques des Visites</h2>
<div id="detail">
<div id="titrestats">Statististiques sur les 30 jours</div>
<div id="cadretitre"><img src="images/cadretitre.gif" width="260" height="65" alt="cadretitre"></div>
</div>
<div id="graphique">
<img src="php/statistiques00.php">
</div>
<div id="statmois">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="152" height="24" id="FlashID2" title="sur12mois">
<param name="movie" value="lien_12mois.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<param name="swfversion" value="8.0.35.0">
<!-- Cette balise <param> invite les utilisateurs de Flash Player en version 6.0 r65 et ultérieure à télécharger la version la plus récente de Flash Player. Supprimez-la si vous ne voulez pas que cette invite soit visible. -->
<param name="expressinstall" value="Scripts/expressInstall.swf">
<!-- La balise <object> suivante est destinée aux navigateurs autres qu'IE. Supprimez-la d'IE à l'aide d'IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="lien_12mois.swf" width="152" height="24">
<!--<![endif]-->
<param name="quality" value="high">
<param name="wmode" value="transparent">
<param name="swfversion" value="8.0.35.0">
<param name="expressinstall" value="Scripts/expressInstall.swf">
<!-- Le navigateur affichera le contenu alternatif suivant pour les utilisateurs d'un lecteur Flash de version 6.0 ou de versions plus anciennes. -->
<div>
<h4>Le contenu de cette page nécessite une version plus récente d'Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtenir le lecteur Adobe Flash" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<div id="statan">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="152" height="24" id="FlashID3" title="sur10ans">
<param name="movie" value="lien_10ans.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<param name="swfversion" value="8.0.35.0">
<!-- Cette balise <param> invite les utilisateurs de Flash Player en version 6.0 r65 et ultérieure à télécharger la version la plus récente de Flash Player. Supprimez-la si vous ne voulez pas que cette invite soit visible. -->
<param name="expressinstall" value="Scripts/expressInstall.swf">
<!-- La balise <object> suivante est destinée aux navigateurs autres qu'IE. Supprimez-la d'IE à l'aide d'IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="lien_10ans.swf" width="152" height="24">
<!--<![endif]-->
<param name="quality" value="high">
<param name="wmode" value="transparent">
<param name="swfversion" value="8.0.35.0">
<param name="expressinstall" value="Scripts/expressInstall.swf">
<!-- Le navigateur affichera le contenu alternatif suivant pour les utilisateurs d'un lecteur Flash de version 6.0 ou de versions plus anciennes. -->
<div>
<h4>Le contenu de cette page nécessite une version plus récente d'Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtenir le lecteur Adobe Flash" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<div id="statjour">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="152" height="24" id="FlashID" title="sur30jours">
<param name="movie" value="lien_30jours.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<param name="swfversion" value="8.0.35.0">
<!-- Cette balise <param> invite les utilisateurs de Flash Player en version 6.0 r65 et ultérieure à télécharger la version la plus récente de Flash Player. Supprimez-la si vous ne voulez pas que cette invite soit visible. -->
<param name="expressinstall" value="Scripts/expressInstall.swf">
<!-- La balise <object> suivante est destinée aux navigateurs autres qu'IE. Supprimez-la d'IE à l'aide d'IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="lien_30jours.swf" width="152" height="24">
<!--<![endif]-->
<param name="quality" value="high">
<param name="wmode" value="transparent">
<param name="swfversion" value="8.0.35.0">
<param name="expressinstall" value="Scripts/expressInstall.swf">
<!-- Le navigateur affichera le contenu alternatif suivant pour les utilisateurs d'un lecteur Flash de version 6.0 ou de versions plus anciennes. -->
<div>
<h4>Le contenu de cette page nécessite une version plus récente d'Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtenir le lecteur Adobe Flash" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<div id="journee">
<script type="text/javascript">document.getElementById('journee').innerHTML = part01;</script>
</div>
<div id="heure">
<script type="text/javascript">document.getElementById('heure').innerHTML = part02;</script>
</div>
</div>
<div id="pied">
<table width="945" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="40">&nbsp;</td>
<td width="120"><a href="formulaire00.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('bouton_devis','','images/bouton_devis_on.gif',1)"><img src="images/bouton_devis_off.gif" alt="bouton_devis" name="bouton_devis" width="120" height="97" border="0"></a></td>
<td width="120"><a href="acces00.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('bouton_acces','','images/bouton_acces_on.gif',1)"><img src="images/bouton_acces_off.gif" alt="bouton_acces" name="bouton_acces" width="120" height="97" border="0"></a></td>
<td width="120"><a href="infos00.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('bouton_infos','','images/bouton_infos_on.gif',1)"><img src="images/bouton_infos_off.gif" alt="bouton_infos" name="bouton_infos" width="120" height="97" border="0"></a></td>
<td width="545"><img src="images/pied_droite_tout_vide.gif" alt="pied_droite" width="545" height="97" border="0" usemap="#Map3"></td>
</tr>
</table>
</div>
</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID2");
swfobject.registerObject("FlashID3");
</script>
</body>
</html>






jyd
jeudi 10 juin 2010 à 10:23:04 | Re : Passage de variables du javascript vers du html avec du code externe

jytest


J'ai oublié de préciser ce qu'est censé faire ce code.
C'est pour avoir dans "journee", la date dynamique du jour et dans "heure", l'heure dynamique du moment.

A l'aide, svp.
jyd
samedi 12 juin 2010 à 17:36:19 | Re : Passage de variables du javascript vers du html avec du code externe

PetoleTeam

Membre Club
Bonjour,
je ne sais trop par quoi commencer!
Bon je me jette...
pour commencer il ne faut mettre que le code qui pose problème ou qui a avoir avec celui ci, ici 400 lignes ce qui rend difficile la lecture surtout quand il n'y à pas d'indentation et le balisage de CODE et rebute les potentiel intervenant, bon ceci étant dit...

Tu as une function
function date_heure(id)
et lors de l'appel sur le body tu ne passe pas de paramètre
<body onload "date_heure()">
on notera au passage que tu as omis le signe égal, il devrait y avoir
<body onload = "date_heure(id_element)">

Plus loin dans le document tu écris
Code HTML :
<div id="journee">
<script type="text/javascript">document.getElementById('journee').innerHTML = part01;</script>
</div>
<div id="heure">
<script type="text/javascript">document.getElementById('heure').innerHTML = part02;</script>
</div>
or les variables part01 et part02 n'étant pas globale ne sont donc pas connues à ce niveau...
laisses les balise vides elles se rempliront par la suite...
Code HTML :
<div id="journee"></div>
<div id="heure"></div>

;O)

Remontons à la fonction
c'est dans celle ci que tu dois mettre ce que l'on vient de supprimer des DIVs

...corriges déjà cela est la solution apparaîtra toute seule...
samedi 12 juin 2010 à 22:18:19 | Re : Passage de variables du javascript vers du html avec du code externe

jytest

Bonsoir à toi.

Merci pour ta réponse.
De mon côté, désolé pour la réactivité pas très exemplaire de ma part...
Je me suis retrouvé le pied dans le plâtre... ceci explique cela...

N'est-il donc pas possible d'appeler cette fonction en externe...
car comme je comprends je dois l'intégere 2 fois (dans 'journee' et dans 'heure')... De plus cette fonction va se faire rappeler à 4 reprises dans 2 autres pages HTML... C'est de là qu'il me swemblait intéressant de faire un appele externe...

Peux-tu reconsidérer ce petit souci dans ta correction.
Merci d'avance.
jyd
samedi 12 juin 2010 à 22:19:45 | Re : Passage de variables du javascript vers du html avec du code externe

jytest

Aussi, je précise pourquoi j'ai envoyé tout le code... car j'avais déjà un javascript interne et un autre... pour éviter d'éventuelles confusions.

Merci d'avance pour ton aide.



jyd
dimanche 13 juin 2010 à 07:40:32 | Re : Passage de variables du javascript vers du html avec du code externe

PetoleTeam

Membre Club
Bonjour et bon rétablissement
N'est-il donc pas possible d'appeler cette fonction en externe...
c'est même une bonne pratique.

Il te faut également prendre de bonnes habitudes de codage, déclaration des variables avec le mot var, point virgule en fin d'instruction, les accolades ou autre indentation...etc...

A lire Bonnes pratiques javascript du site du Zéro.

ton code pourrait se résumer à cela
ton fichier date.js
Code Javascript :
//-- Definition litterale
var jours = new Array('Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi');
var mois  = new Array('Janvier', 'F&eacute;vrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Ao&ucirc;t', 'Septembre', 'Octobre', 'Novembre', 'D&eacute;cembre');
//-------------------
function date_heure(){
  //-- Recup date...etc...
  var date  = new Date;
  var annee = date.getFullYear();
  var moi   = date.getMonth();
  var j     = date.getDate();
  var jour  = date.getDay();
  var h     = date.getHours();
  var m     = date.getMinutes();
  var s     = date.getSeconds();
  //-- formattage sortie
  if (h < 10){
    h = "0" + h;
  }
  if (m < 10) {
    m = "0" + m;
  }
  if (s < 10) {
    s = "0" + s;
  }
  //-- chaine resultat
  var part01 = 'Nous sommes le ' + jours[jour] + ' ' + j + ' ' + mois[moi] + ' ' + annee;
  var part02 = h + ':' + m + ':' + s;
  //-- ecriture resultat
  document.getElementById('journee').innerHTML = part01;
  document.getElementById('heure').innerHTML   = part02;
  //-- rappel fonction
  setTimeout( function(){ date_heure()}, '1000');
  return true;
}
cette fonction peut être optimisée et améliorée avec les tests mais ce n'est pas le sujet...

et ton fichier date.html mini
Code HTML :
<html>
<head>
<script type="text/javascript" src="date.js"></script>
</head>
<body onload = "date_heure()">
  <div id="journee"></div>
  <div id="heure"></div>
</body>
</html>

;O)


Cette discussion est classée dans : javascript, date, version, flash, player


Répondre à ce message

Sujets en rapport avec ce message

problème youtube [ par b3n77 ] slt, j'ai un problème avec youtube depuis 1 semaine je ne peux plus voir de vidéos <img title=":pleure:" alt=":pleure:" src="http://forum Detecter une version specifique du flash player (10) [ par uinen ] Salut a tous, Apres pas mal de recherches infructueuses je viens poster ici.Je cherche un code qui me permette de detecter la version du flash player Demande de conseil Javascript et Flash [ par Twistjo32 ] Bonjour, Voila je me décide de poser ma question, puisque je n'arrive pas à assembler tous ce que je trouve pour arriver à mon but... Mon projet est javascript non pris en compte sur serveur [ par infobarquee ] bonjour,j'ai un gros pb avec un script php qui fait appel a un javascript.en local avec wamp cela fonctionne sans pb, mais pas du tout sur le server d eteindre une video en Flash via un llien et évenement javascript [ par mikymaxxx ] Bonjour,voilà, tout d'abord j'aurai aimé pouvoir éteindre la vidéo en cliquant sur le lien "close this video", car lorsque je suis le lien, la page se Formulaire PHP Date [ par michaelminelli1 ] Bonjour, Actuellement sur mon sit quand il faut séléctionner une date dans un menu deroulent le menu affiche ainsi : 27-03-2010 28-03-2010 29-03-201 lecteur video flash + javascript [ par stonedbike ] Bonjour, J'ai cherché mais n'ai pas trouvé de réponse à mon problème... J'ai sur mon site une série d'images ; j'aimerais que pour chacune d'entre e problème d'appler lien javascript en flash [ par soumadi ] Bonjour, j'ai un probème que j'arrive pas à résoudre. je travaille sur un site avec joomla 1.5,j'ai intégré le plugin modalizer pour l'effet lightbo Vérification d'une date de naissance - Javascript [ par Echecetmatt ] Salut à tous ! [^^clinoeil1] Voilà, je suis en train de créer un formulaire, il marche sans problème mais il y a un truc que je n'arrive pas à faire,


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,312 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales