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

Version imprimable

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:

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);

30/08/2010, 13h18
SpaceFrog

Code:

doument.getElementById(this.id)

doument = ???

this => représente la fonction ...
30/08/2010, 13h46
Velatus

"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... :cry:
30/08/2010, 13h48
Bovino

Code:

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é ?
30/08/2010, 13h55
Velatus

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

Code:

<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.
30/08/2010, 14h07
Bovino
Donc canvas n'existe pas (encore) au moment où ta fonction est appelée :mrgreen:
Code:

1 2 3 4 window.onload = function(){ var mf = new Frame("canvas"); ... }
éventuellement, si tu as besoin que mf soit globale :
Code:

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

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

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:

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:

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