Insérer variable Javascript dans code HTML

Version imprimable

20/05/2007, 15h19
raptorman

Insérer variable Javascript dans code HTML

Bonjour,

Je souhaiterais insérer une variable crée avec javascript dans le reste de ma page HTML, mais je bloque totalement après de nombreuses recherches infructueuses.

Voici ce que j'aimerai faire :

J'ai donc cette variable javascript :

Code:

var maVar = Math.floor(Math.random() * 101);

Je voudrais donc pouvoir insérer le résultat de cette fonction de nombre aléatoire qui se trouve dans la variable maVar dans mon code HTML, qui est le suivant :

Code:

<div id="image" style="position:absolute; left: ICI doit figurer le contenu de la variable px; top: 50 px;">

Je n'arrive donc pas du tout à insérer la variable javascript maVar dans ce code HTML.

Merci par avance pour vos lumières.
20/05/2007, 16h40
Ikonic
salut,

dans ta partie javascript, après la détermination de ta variable maVar, insères ceci :
Code:

1 2 document.getElementById('image').style.left = maVar+"px";
et retire l'attribut left pour le style du div

Salut Ikonic et merci tout d'abord pour ta réponse.

J'ai donc effectué les manipulations que tu m'a conseillé, mais malheureusement, rien n'a changé, le problème persiste, le div apparait toujours en haut à gauche de la page.

Je te met ici ce que donne le code à présent.

Pour la partie javascript :
Code:

1 2 3 4 var maVar1 = Math.floor(Math.random() * 501); var maVar2 = Math.floor(Math.random() * 501); document.getElementById('image').style.left = maVar1+"px"; document.getElementById('image').style.top = maVar2+"px";
Pour le html :

Code:

<div id="image" style="position:absolute;">

Qu'en penses-tu ?

teste ainsi

Code:

1
2
maVar1 = Math.floor(Math.random() * 501);
maVar2 = Math.floor(Math.random() * 501);

20/05/2007, 17h55
raptorman

J'ai testé ce que tu as proposé, mais cela n'a malheureusement rien changé.

Je ne vois personnellement pas du tout ce qui peu poser problème.

salut,

si tu tente de modifier le champs left sur une balise il faut d'abord que ton document soit entiérement chargé...en d'autre terme si tu tente une chose du genre:
Code:

1 2 3 4 5 6 7 8 9 <html> <head> <script type="text/javascript"> var maVar = Math.floor(Math.random() * 101); document.getElementById('image').style.left=maVar+"px"; </script> </head> <body><div id="image" style="position:absolute; left: xxx px; top: xxx px;"> MACHIN </div> </body> </html>
ça ne marchera pas...

tu doit alors encapsuler ton code dans une fonction et faire window.onload=mafonction, j'éspère que ça réponds à ton problème ;)

20/05/2007, 18h43
raptorman
Merci pour ta réponse phpmad.

D'accord, je vois à peu près ce que tu veus dire, mais le problème, c'est que le résultat de la fonction aléatoire contenue dans la variable maVar, j'en ai également besoin pour une autre fonction, valeur aléatoire qui doit être la même pour les deux fonctions, donc si je met ceci dans une fonction :
Code:

1 2 3 4 5 6 function maFonction() { var maVar = Math.floor(Math.random() * 101); document.getElementById('image').style.left=maVar+"px"; }
Et que je l'appel une première fois pour la valeur de left dans le div, puis une seconde fois pour mon autre fonction, je n'aurais pas la même valeur vu qu'il s'agit d'une valeur aléatoire.

Je ne sais pas si j'ai été assez clair, mais vois-tu qu'elle pourrait être la solution ?
20/05/2007, 18h59
Ikonic
Mon erreur est que tu dois définir un attribut left et top pour ton div...
Mais il faut que ceux-ci soient lus avant ta fonction javascript.
Donc le mieux à faire et de créer une feuille de style dans laquelle tu mets
Code:

1 2 3 4 5 #image { position:absolute; left: 1 px; top: 1 px; }
et donc ta balise link pour le css doit être avant ton code javascript dans la page

Bon, finalement après quelques recherches sur ce que proposais phpmad avec windows.onload, j'ai pu trouver des informations intéressantes, et tout marche parfaitement maintenant.

Voici ce que j'ai rajouté, juste après l'ouverture de la balise body, en laissant comme avant le javascript :
Code:

1 2 3 4 5 6 7 8 9 <script language="javascript"> window.onload=function() { document.getElementById('image').style.left = maVar1+"px"; document.getElementById('image').style.top = maVar2+"px"; maFonction(); } </script>
C'est finalement un mélange de vos deux propositions qui a permis de résoudre le problème :)

Merci encore à vous pour vos précieux conseils ;)

Citation:
Envoyé par raptorman
Code:

1 2 3 4 5 6 function maFonction() { var maVar = Math.floor(Math.random() * 101); document.getElementById('image').style.left=maVar+"px"; }
solution ?
Autre façon de faire plus élégante, à mon avis :roll:,

déclarer maVar en dehors de ta fonction, c'est tout :aie:
Code:

1 2 3 4 5 6 7 var maVar = 0; function maFonction() { maVar = Math.floor(Math.random() * 101); document.getElementById('image').style.left=maVar+"px"; }