Insérer variable Javascript dans code HTML

**raptorman** · 20/05/2007, 15h19

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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.

**Ikonic** · 20/05/2007, 16h40

salut,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById('image').style.left = maVar+"px";

et retire l'attribut left pour le style du div

**raptorman** · 20/05/2007, 17h17

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Qu'en penses-tu ?

**Ikonic** · 20/05/2007, 17h37

teste ainsi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**raptorman** · 20/05/2007, 17h55

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.

**phpmad** · 20/05/2007, 18h20

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**raptorman** · 20/05/2007, 18h43

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**Ikonic** · 20/05/2007, 18h59

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**raptorman** · 20/05/2007, 19h06

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**phpmad** · 23/05/2007, 12h06

Envoyé par raptorman

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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";
}

Insérer variable Javascript dans code HTML

JavaScript

Discussions similaires

Partager

Partager