impossible d'accéder aux méthodes de l'objet document

**Velatus** · 30/08/2010, 13h15

Bonjour.

Je suis en train de travailler sur un projet de site professionnel mettant en oeuvre Javascript. Je précise que je suis assez nouveau dans ce domaine (je code principalement en FreeBASIC, donc autant dire que la POO n'est pas exactement mon fort). Je cherche à utiliser la librairie jsAnim, pour animer le contenu du site. Pour des raisons de commodité, et parce que j'ai besoin de stocker les caractéristiques des différents DIV de la page entre les appels de méthodes jsAnim, j'ai décidé d'adopter une approche orientée-objet.
J'ai donc créé un objet Frame. Le problème, c'est que dans ma routine d'initialisation de l'objet en question, j'ai besoin d'accéder aux propriétés des DIV, telles qu'elles sont écrites dans le fichier CSS de ma page.
Rien de plus facile, me disais-je: il suffit d'utiliser document.getElementByID(). Or ça ne marche. Lorsque je compile le script, SciTE m'envoie le message suivant:
"C:\Documents and Settings\Owner\Desktop\test\test.js(1, 1) Microsoft JScript runtime error: 'document' is undefined". C'est bizarre, dans la mesure où il me semble que document est un objet global.
Dans Firefox, il ne se passe juste rien. Mon objet n'est semble-t-il pas chargé, et lorsque j'utilise alert() pour me renvoyer les variables de mon objet, une fenêtre vide apparaît.
J'ai peut-être fait des erreurs de syntaxe???
Voilà le code:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
function Frame(idstring) {
this.id = idstring;
this.left = parseInt(doument.getElementById(this.id).style.left);
this.top = parseInt(doument.getElementById(this.id).style.top);
this.width = parseInt(doument.getElementById(this.id).style.width);
this.height = parseInt(doument.getElementById(this.id).style.height);
this.state = 0;
}
 
var mf = new Frame("canvas");
 
alert(mf.left+" "+mf.top+" "+mf.width+" "+mf.height);

**SpaceFrog** · 30/08/2010, 13h18

Code :

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

doument.getElementById(this.id)

doument = ???

this => représente la fonction ...

**Velatus** · 30/08/2010, 13h46

"doument", c'est juste moi qui me suis trompé en recopiant mon code sur le forum. Même avec "document", ça ne marche pas... Ce n'est donc pas une faute de frappe. J'ai réécrit this.left etc. en passant non plus this.id, mais idstring (la variable de la fonction constructeur). Et... rien ne se passe. Le compilateur me dit toujours que 'document' est undefined...

**Bovino** · 30/08/2010, 13h48

Code :

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

var mf = new Frame("canvas");

elle est placée où dans ton code cette ligne ?
La balise dont l'id est canvas existe bien au moment où le script est appelé ?

**Velatus** · 30/08/2010, 13h55

@Bovino: Le script est dans le <HEAD> du fichier HTML, sous la forme:

Code :

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

<script type:"text/javascript" src="test.js"></script>

La variable mf est déclarée juste après la définition de la fonction Frame().
L'objet dont l'id est "canvas" est, lui, déclaré dans le <BODY> du HTML.

**Bovino** · 30/08/2010, 14h07

Donc canvas n'existe pas (encore) au moment où ta fonction est appelée

Code :

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

1
2
3
4
window.onload = function(){
    var mf = new Frame("canvas");
    ...
}

éventuellement, si tu as besoin que mf soit globale :

Code :

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

1
2
3
4
5
var mf;
window.onload = function(){
    mf = new Frame("canvas");
    ...
}

**Velatus** · 30/08/2010, 14h24

Désolé, Bovino, mais il y a quelque chose qui ne tourne pas rond. Voilà le code HTML:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
 
	<head>
 
		<title>TEST PAGE</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="shortcut icon" type="image/x-icon" href="" />
		<link rel="stylesheet" media="screen" type="text/css" title="test" href="test.css" />
		<script type="text/javascript" src="test.js"></script>
	</head>
 
	<body>
		<div id="canvas"></div>
	</body>

Et voilà le contenu de test.js:

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
var mf;
 
function Frame(idstring) {
	this.id = idstring;
	this.left = document.getElementById(idstring).style.left;
	this.top = document.getElementById(idstring).style.top;
	this.width = document.getElementById(idstring).style.width;
	this.height = document.getElementById(idstring).style.height;
	this.state = 0;
}
 
window.onload = function() {
	mf = new Frame("canvas");
	alert(mf.left);
}

Et, à tout hasard, le contenu de test.css:

Code :

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

#canvas {position: absolute; left: 120px; top: 121px; width: 122px; height: 123px; background: green;}

La bonne nouvelle, c'est que la compilation ne plante plus. La mauvaise, c'est qu'apparemment, les variables de mf après l'appel de la fonction constructeur sont null. Je ne vois pas ce qui cloche...

impossible d'accéder aux méthodes de l'objet document

JavaScript

Discussions similaires

Partager

Partager