Discussion :

[billouDu92]

Bonjour, je suis en train de développer une bibliothèque de classe pour la création de site.
Malheureusement j'ai une erreur que je ne comprend pas.

element is null
[Stopper sur une erreur] element.appendChild(context);

L'erreur apparait dans le fichiers mootools, et non dans mon fichier du coup je n'arrive pas à comprendre l'erreur.

Voici la fonction qui me pose problème dans ma class :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var slides = [];
for(var i = 0; i < this.images.length; i++)
{
	var elemenImage = new Element('img', {
		src: this.images[i],
		styles: {
			opacity: 0,
			position: 'absolute',
			'z-index': 10
		}
	});
	elemenImage.inject(this.options.divEmplacement);
}

L'erreur est lié avec la ligne mit en rouge.

Merci de vos réponse.

[vermine]

Bonsoir,

Je pense qu'element fait ici référence à this.options.divEmplacement. Etes-vous sûr que cet élément existe ? Vous essayez de rajouter une image dans un <select> ?

[billouDu92]

Bonjour,

Mon element this.options.divEmplacement est non null.

J'ai vérifier avec un alert() et j'obtiens bien une valeur.

Code :

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

alert(this.options.divEmplacement)

C'est une options que je règle lors de l'appel du constructeur.

Je n'essaye pas d'ajouter une image dans un select, mais dans un tableau d'images documentation mootools : Asset.

Une fois les images chargé, cette fonction est appelé afin d'ajouter les éléments dans la page HTML. Il sont mit bout à bout, et périodiquement il sont tous masqué sauf un dont l'opaciter est à 1.

Voici le message d'erreur complet (selon FireBug):

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
element is null
	bottom()																	mootools-core.js (ligne 3095)
		context = img#imgSlide0 ./images...2._m.jpg
		element = null
	inject()																	mootools-core.js(ligne 3277)
		el = "slideshow-holder-page"
		where = "bottom"
	complet()																	class.js (ligne 368)
	wrapper()																	mootools-core.js(ligne 1311)
	main()																		class.js (ligne 339)
	wrapper()																	mootools-core.js(ligne 1311)
	?p=pageSliders()																?p=pageSliders (ligne 100)
	[Stopper sur une erreur] element.appendChild(context);												mootools-core.js(ligne 3095)

class.js -> mon fichier contenant la classe qui bug.

Merci de vos réponse.

[vermine]

Pourrions-nous avoir plus de code ? J'aimerais pourvoir créer une page de test.

[billouDu92]

Pas de soucis, voici mon 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
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
var sliders = new Class({
	Implements: Options,
		options : {
			//Couleur de l'arriere plan
			couleurArrierePlan : 'none',
			//Repertoire contenant les images
			repertoireImage : './images/',
			//Temps chamgement image
			tempsSeconde : 1000,
			//div emplacement du slider
			divEmplacement : 'slideshow',
		},
 
	//les variables
	images : [],
	index: 0,
 
	//Fonction d'initialisation
	initialize: function(options, dataImage){
		this.setOptions(options);
		for(var i = 0; i < dataImage.length; i++)
			this.images.push(dataImage[i]);
	},
 
	main : function() {	//Fonction principale
		for(var i = 0; i < this.images.length; i++)
			this.images[i] = this.options.repertoireImage + this.images[i];
 
		//Tableau d'images
		var loader = new Asset.images(this.images, {
			// onComplete: function() {
			onComplete: this.complet(),
				// this.complet();
			// }
		});
	},
 
	complet: function()
	{
		var slides = [];
		var elemenImage;
 
		for(var i = 0; i < this.images.length; i++)
		{
			slides.push(
			elemenImage = new Element('img', {
				id: 'imgSlide'+i,
				src: this.images[i],
				styles: {
					opacity: 0,
					position: 'absolute',
					'z-index': 10,
				},
			});
			elemenImage.inject($('slideshow-holder-page'), 'bottom');
			);
		}
		/*
		// this.images.each(function(im, num) {
			// slides.push(new Element('img', {
				// src: im,
				// styles: {
					// opacity: 0,
					// position: 'absolute',
					// 'z-index': 10
				// }
			// }).inject(this.options.divEmplacement));
		// });
 
 
		(function() {sliders[index].tween('opacity', 1);}).delay(1000);
 
		var start = function(){(
			function()
			{
				this.options.divEmplacement.setStyle('background', this.options.couleurArrierePlan);
				slides[index].fade(0);
				++index;
				index = (slides[index] ? index : 0);
				slides[index].fade(1);
			}).periodical(this.options.tempsSeconde);
		};
		start();
		*/
	},
});