mon getElementById ne marche pas

**Tooomas** · 05/03/2007, 00h11

Bonjour,

pourriez me mettre sur la bonne voie, j'essaie de positionner un élément avec getElementById après un calcul que je symbolise ici par une fonction bidon. Mais comment faire rentrer le résultat dans la coordonnée ? Qu'est-ce qui me manque dans le code ?

Merci beaucoup pour votre aide !!

Tomas

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
<head>
<title>Vyroba</title>
<style type="text/css"> 
#image	{position: absolute; top:150px; background-color: yellow; width: 200px; height:200px; }
</style>
 
<script>
function calculX() { 
a = 100;
return a; 
}
</script>
 
</head>
 
<body>
 
<script>
a = calculX();
document.getElementById("image").style.left = a;
</script>
 
<div id="image"></div>
 
</body>
</html>

**N1bus** · 05/03/2007, 00h22

Bonjour,

Peut-etre que le nom de ton div ne conviens pas : image est peut etre un mot réservé. Tu devrais le renommer , par exemple div-img , et ressayer

**Tooomas** · 05/03/2007, 00h40

J'ai tout simplifié, mon div s'appel l'autrement dans "la réalité". Donc le problème ne viendrait pas d'ici...

**bigboomshakala** · 05/03/2007, 01h24

hello

ton div n'est créé qu'après l'appel du script !
déplace ton script après le code html du div et ça marchera

**Tooomas** · 05/03/2007, 01h57

Si si, ça marche !!! Et dire que je me casse la tête depuis deux jours...

Mais il y a un autre problème qui apparait du coup...
Je veux lancer le calcul de ses coordonnées régulieurement et j'ai rajouté donc une fonction :

Code :

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

1
2
3
4
5
6
7
function allezgo() {
document.write("");
a = calculX();
b = calculY();
document.getElementById("image").style.left = a;
document.getElementById("image").style.top = b;
}

si donc je met après mon div

Code :

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

1
2
3
<script>
allezgo();
</script>

ça marche toujours très bien - en manuel. En raffraichissant la page, ça recalcul et replace l'élément.

MAIS ! si j'ajoute à la place

Code :

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

1
2
3
<script>
setInterval("allezgo()",1000);
</script>

tout les éléments html disparaissent au bout d'une seconde - et de toute façon même pedant la second que l'élément était affiché, il n'a pas pris en compte le coordonnées fournis par le calcule. Pourtant le recalcule marche, je fais afficher les résultats. Mais - ça se passe ensuite sur une page blanche. Et c'est vraiment seulement le setInterval qui a tout fait disparaître...

Vous saurriez que faire pour que setInterval("allezgo()",1000); ne fasse pas tout disparaitre ???

Merci énormément d'avance, je ne suis pas un confirmé en JavaScript... !!!

**bigboomshakala** · 05/03/2007, 02h06

un truc comme ça je suppose ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<html>
<head>
<title>Vyroba</title>
<style type="text/css"> 
#image	{position: absolute; top:150px; background-color: yellow; width: 200px; height:200px; }
</style>
 
<script>
	function getPos(o)
{
	try
	{
		var x = y = 0;
		if (o.offsetParent)
		{
			x = o.offsetLeft;
			y = o.offsetTop;
			while (o = o.offsetParent)
			{
				x += o.offsetLeft;
				y += o.offsetTop;
			}
		}
		return [x,y];
	}
	catch(ex){ window.status = 'function getPos exception : ' + ex.name + ' - ' + ex.message; return [-1,-1];}
}
 
function allezgo(){
	var a = getPos(document.getElementById("image"))[0] + 10;
	var b = getPos(document.getElementById("image"))[1] + 10;
	document.getElementById("image").style.left = a; 
	document.getElementById("image").style.top = b;
	setTimeout("allezgo()",500);
}
</script>
 
</head>
 
<body>
 
 
 
<div id="image"></div>
 
<script>
allezgo();
</script>
</body>
</html>

**SpaceFrog** · 05/03/2007, 09h44

en fait tu as juste un problème d'instanciation vu la position de ton script ...
au moment ou tu appelles avec getElementById ton objet n'est pas encore instancié !

déplace ton script àprès la création du div dasn le flux de la page ou mets le après la balise fermante du body ...
ou fait une focntion que tu appelles dans le onload ...

**Tooomas** · 05/03/2007, 13h11

Vous êtes vachement gentis, merci pour vos efforts... Mais malgrès tout ce que j'ai essayé d'après vos conseils, ça me fait toujours les mêmes bogues...

Je tente une chose. Je mets le tout. Malgrès l'application de tout ce que j'ai pu comprendre de votre exemple qui marche et de vos conseils, ça cloche encore quelque part... Vous y verrez la faille ???

En effet, le calcul apporte le positionnement des éléments par apport à la taille réelle de la fenêtre ouverte. Le CSS n'y fera rien, ça finit par s'alligner en bas à droite sur une portion "recadrée" à l'intérieur du contenu. Le reste sort comme superflu. Le recadrage est ici symbolisé par le cadre vert. (D'abord le jaune est centré, ensuite le vert est centré proportionnellement et à la fin le vert reste visible en bas à droite - vraiment pas de salut avec css).

Voici le code :
(ça marche en manuel, en changeant la taille de la fenêtre et en rechargeant la page. Mais en ajoutant setInterval, rien ne va plus.)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
 
<head>
<title>Deplacement</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css"> 
#image_principale		 {position: absolute; background-color: yellow; width: 980px; height:690px;} 
#image_centre			 {position: absolute; background-color: non; width: 640px; height: 540px; top: 50px; left: 200px;
border: green 30px solid; } 
 
</style>
 
<script>
 
function winH() {
   if (window.innerHeight)
      return window.innerHeight;
   else if
   (document.documentElement &&
   document.documentElement.clientHeight)
      return document.documentElement.clientHeight;
   else if
   (document.body && document.body.clientHeight)
      return document.body.clientHeight;
   else
      return null;
}
 
function winW() {
   if (window.innerWidth)
      return window.innerWidth;
   else if
   (document.documentElement &&
   document.documentElement.clientWidth)
      return document.documentElement.clientWidth;
   else if
   (document.body && document.body.clientWidth)
      return document.body.clientWidth;
   else
      return null;
}
 
 
function laterale(W) {
var m=980;
var a=700;
var r=200;
if (W >= m) {
	x = (W - m)/2;
	x = Math.floor(x);
	document.write("W>m: "+x+"<br />");
	}
else if (a < W && W < m) {
	x = (7/5)*((W - m)/2);
	x = Math.floor(x);
	document.write("a < W < m: "+x+"<br />");
	}
else if (a > W) {
	x = W - a - r;
	document.write("a>W: "+x+"<br />");
	}
	x = Math.floor(x);
	return x;
};
 
function superieur(H) {
var n=690;
var b=540;
var q=50;
if (H >= n) {
	y = (H - n)/2;
	y = Math.floor(y);
	document.write("H>n: "+y+"<br />");
	}
else if (b < H && H < n) {
	y = (5/4)*((H - n)/2);
	y = Math.floor(y);
	document.write("b < H < n: "+y+"<br />");
	}
else if (b > H) {
	y = H - n + q;
	document.write("b>H: "+y+"<br />");
	}
	y = Math.floor(y);
	return y;
};
 
function calculX() { 
puf = winW();
paf = laterale(puf);
return paf;
}
 
function calculY() { 
aaa = winH();
bbb = superieur(aaa);
return bbb;
}
 
 
function allezgo() {
var a = calculX();
var b = calculY();
document.getElementById("image_principale").style.left = a;
document.getElementById("image_principale").style.top = b;
// setInterval("allezgo()",1000);
// (que je l'active ici ou plus bas, c'est le meme bogue...)
 
}
 
</script>
</head>
 
<body>
 
 
 
<div id="image_principale">
	<div id="image_centre"></div>
</div>
 
<script>
allezgo();
// setInterval("allezgo()",1000);
</script> 
 
</body>
 
</html>

Je sais, si j'étais un bon, j'aurais la réponse tout seul... Merci d'avance pour votre aide ! En effet, la seule chose qui cloche c'est ce "setInterval"... (setTimeout à la place n'a rien arrangé).

**SpaceFrog** · 05/03/2007, 13h40

lance le setInterval dans le onload de la balise body

**Tooomas** · 05/03/2007, 13h47

Je l'ai fait comme ça :

Code :

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

1
2
3
4
5
6
7
8
<body onload="setInterval("allezgo()",1000);">
 
<div id="image_principale">
	<div id="image_centre"></div>
</div>
 
</body>
</html>

et ça n'a rien donné...

**SpaceFrog** · 05/03/2007, 13h54

mets un alert au debut de la focntion pour voir au moins si elle est lancée ...

**Tooomas** · 05/03/2007, 14h05

Effectivement, ni window.alert("Salut"); ni document.write("By by"); place dans la fonction allezgo() ne donnent rien dans ce cas-là... (<body onload="setInterval("allezgo()",1000);">

Mais dans d'autres cas, le calcul se fait régulieurement, seulement sur la page blanche - je fait afficher les résultats. Pourquoi ça marche parfaitement en manuelle et pas en "automatique" ? Pourtant, le "allzego()" relance toute la procédure depuis le début...

**Tooomas** · 05/03/2007, 14h09

Si, ça marche un peu, en remplacant les guillemets :
<body onload="setInterval('allezgo()',1000);">

Mais c'est toujours la même chose. Je vois le compte rendu du calcul sur la page blanche, les éléments ont disparu !

**SpaceFrog** · 05/03/2007, 14h10

problème de quotes ...

Code :

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

1
2
 
<body onload="setInterval(function(){allezgo()},1000);">

ou

Code :

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

<body onload="setInterval('allezgo()',1000);">

**Tooomas** · 05/03/2007, 14h17

Oui, on a du se croiser... J'ai effectivement remarqué le pb des quotes, je l'ai corrigé. J'ai ensuite essayé ta deuxième possibilité d'écriture. Le résultat est le même : calcul se fait, mais sur une page blanche...

**Tooomas** · 05/03/2007, 14h24

L'exemple qui marchait admirablement de "bigboomshakala" est clair. J'ai juste remplacé sa function getPos(o) par la mienne - et rien ne vas plus pour l'affichage. Si non, je pense que l'architecture de nos deux choses est strictement la même ! J'ai bien vérifié ! Je suis punis pour des péchés comises ???

**SpaceFrog** · 05/03/2007, 14h24

normal document.write ecrase le contenu de la page ...

colle un div sur la page et attribues lui le contenu que tu souhiates en innerHTML par exemple ..

**Tooomas** · 05/03/2007, 14h55

Super ! Ca marche. En enlevant les document.write, ça marche. Pourquoi alors ça marché manuellement avec ???

Donc si je résume toutes mes problèmes c'était :
1) soit l'ordre de placement de mon "div" et de la "fonction", soit il fallait placer l'unload dans le body
2) des quotes imbriqués
3) document.write qui efface tout

Et voilà !!!
Merci beaucoup !!

P.S. Naivement, j'ai pensé que les éléments vont se redimentionner avec le redimentionnement de la fenêtre, en temps réel, comme avec CSS. Mais non, ça se réajuste une fois la souris lachée. Bon tant pis, on ne peut pas tout avoir...

**bigboomshakala** · 05/03/2007, 15h06

pour qu'il se passe une action au redimensionnement de la fenêtre il faut associer une fonction à l'événement window.onresize

Code :

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

window.onresize = function(){repositionner ('idToto')};

**SpaceFrog** · 05/03/2007, 15h34

tes elements se redimensionneraient avec la fenetre si ils étaient dimensionnés en pourcentage à la base ...
Mais bon dimensionner intégralement un site en % ... bonjour la galère ...

mon getElementById ne marche pas

JavaScript

Discussions similaires

Partager

Partager