fonction document.getElementById

nike547 · 19/01/2011, 00h28

Bonjour à tous, j'essaye actuellement de créer un slideshow (diaporama) automatique en javascript mais Safari me renvoit l'erreur "TypeError: Result of expression 'link' [null] is not an object". Pouvez-vous m'aidez. Veuillez m'excuser pour mon peu d'expérience dans ce langage.

Fichier 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
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
<!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" >
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_NYS.css" />
   <head>
       <title>New York Shoes NYS Copyright 2011</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <!--[if !IE]> <-->
		<style type="text/CSS">
		#menu li ul 
		{
 		position:absolute;
 		}
		</style>
		<!--><![endif]-->
 
		<!--[if IE 8]>
		<style type="text/CSS">
		#menu li ul 
		{
 		position:absolute;
 		}
		</style>
		<![endif]--> 
         <script type="text/javascript" src="script.js"></script>
 
   </head>
   <body>
 
   	<div id="en_tete">  	   	
	</div>
 
	<div id="menu">	 	
   		<ul>
   			<div class="element_menu1">
   				<li><a href="">Men</a>
   					<ul>
   						<li>New Products</li>
   						<li>Brands</li>
   						<li>Kind of shoes</li>   				
   					</ul>
   				</li>
   			</div>
 
   			<div class="element_menu2">   			 			 				      
	   		 	<li>Women
	   		 		<ul>
	   					<li>New Products</li>
	   					<li>Brands</li>
	   					<li>Kind of shoes</li>   				
	   				</ul>
	   			</li> 
   			</div>
 
   			<div class="element_menu3">   			 			 				      
	   		 	<li>Children
	   		 		<ul>
	   					<li>New Products</li>
	   					<li>Brands</li>
	   					<li>Kind of shoes</li>   				
	   				</ul>
	   			</li> 
   			</div>	
		</ul> 
        <p>
        	<img id="image" src="images/img1.jpg" alt="img1"/>
         </p>      	  		
   	</div>
 
	<div id="corps">	
		<div id="browsmosaic">
		<p class="firstline">
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="f1"/></a>
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="colums_needmargin"/></a>
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="colums_needmargin" /></a>
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="colums_needmargin"/></a>		
		</p>
 
		</div>  	
   	</div>
 
	<div id="pied_de_page">	
   		<p>Copyright "New York Shoes NYS", all rights reserved</p>
   		<p>by ANDRE Valentin</p>
   		<p class="dateC">2011</p>   		
	</div>
 
 
 
 
 
   </body>
</html>

Fichier javascript :

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
//Déclaration des variables
 
var nbimg=3,hauteur=480,largeur=640,timer,slideshow,i,Delay=3000,currentimg=0,link,source;
 
var tab=new Array('images/img1.jpg','images/img2.jpg','images/img3.jpg');
 
function chgimg()
{
	currentimg++;
 
	if(currentimg>nbimg)
	{
		currentimg=1;
	}
 
}
 
link=document.getElementById('image');
source=link.getAttribute('src');
link.setAttribute('source',tab[currentimg]);
 
 
 
setInterval("chgimg()",Delay);

Merci beaucoup

Bovino · 19/01/2011, 08h11

Au moment ou ton script est appelé et l'instruction

Code :

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

link=document.getElementById('image');

interprétée, le body n'a pas encore été créé, donc pas d'id image...

vermine · 19/01/2011, 08h50

Bonjour,

Je vois aussi d'autres problèmes comme cette instruction :

Code :

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

link.setAttribute('source',tab[currentimg]);

qui devrait sans doute être :

Code :

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

link.setAttribute('src',tab[currentimg]);

;-)

Je ne sais d'ailleurs pas pourquoi on récupère la source (elle sert plus loin ?).
Il reste le fait que ce changement de source de l'image n'est appelé qu'une fois. Il serait mieux de préciser ce bloc d'instructions en fin de fonction chgimg().

Loceka · 19/01/2011, 09h33

Pour compléter :
Mets ton code dans une fonction et appelle la dans le onload du body :

Code :

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

1
2
3
4
5
6
7
8
9
function demarrage() {
  link=document.getElementById('image');
  source=link.getAttribute('src');
  link.setAttribute('source',tab[currentimg]);
 
  setInterval("chgimg()",Delay);
}
...
<body onload="demarrage()">

nike547 · 19/01/2011, 13h36

Merci beaucoup pour vos réponses. Je vais tester tout ça et vous tenir au courant.

nike547 · 19/01/2011, 19h31

J'ai maintenant changer le code javascript de cette façon mais le diaporama ne marche pas.

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
//Déclaration des variables
 
var nbimg=3,hauteur=480,largeur=640,timer,slideshow,i,Delay=3000,currentimg=0,link,source;
 
var tab=new Array('images/img1.jpg','images/img2.jpg','images/img3.jpg');
 
 
function demarrage()
{
	link=document.getElementById('preview');
	source=link.getAttribute('src');
	link.setAttribute('src',tab[currentimg]);
	setInterval("chgimg()",Delay);
}
 
 
 
 
function chgimg()
{
	currentimg++;
 
	if(currentimg>nbimg)
	{
		currentimg=1;
	}
 
 
}

vermine · 19/01/2011, 19h43

Il me semble que ces instructions-ci doivent se trouver dans la fonction chgimg():

Code :

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

1
2
3
 
link=document.getElementById('preview');
link.setAttribute('src',tab[currentimg]);

C'est grâce à elles qu'on détermine la nouvelle image. Ces instructions doivent figurer dans la fonction qui est appelée tous les x temps, sinon l'image ne sera changée qu'une seule fois.

nike547 · 19/01/2011, 19h52

Le problème justement je pense c'est que la fonction chgimg() n'est pas appelé tous les x temps. Mais je ne sais pas où l'appeler et surtout comment.

vermine · 19/01/2011, 19h58

A priori elle sera appelée toutes les 3 secondes :

Code :

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

Delay=3000

Pour peu que vous ayez suivi le conseil de Bovino et de Loceka en appelant la fonction lorsque le body est chargé :

Code :

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

<body onload="demarrage()">

NoSmoking · 19/01/2011, 20h04

Bonjour,
avec le code que je vois la seule chose que fait ton setInterval, est d'incrémenter ton compteur currentimg et le ramené à 1 quand il dépasse le nombre d'image.
En aucun cas il n'interagit avec une autre fonction.

nike547 · 19/01/2011, 20h04

Désolé du nombre des mes posts mais sayez je pense que mon diapo marche ou du moins en partie. J'ai juste appeler chgimg() au load du body. Mais il reste un probleme au bout d'un certain temps les images se mettent à défiler vite comme si cela bugger.

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
132
133
134
135
136
137
<!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" >
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_NYS.css" />
   <head>
       <title>New York Shoes NYS Copyright 2011</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <!--[if !IE]> <-->
		<style type="text/CSS">
		#menu li ul 
		{
 		position:absolute;
 		}
		</style>
		<!--><![endif]-->
 
		<!--[if IE 8]>
		<style type="text/CSS">
		#menu li ul 
		{
 		position:absolute;
 		}
		</style>
		<![endif]--> 
        <script type="text/javascript" src="script.js"></script>
 
 
   </head>
   <body onload="chgimg()">
 
   	<div id="en_tete">  	   	
	</div>
 
   <div id="menu">	 	
   		<ul>
   			<div class="element_menu1">
   				<li><a href="">Men</a>
   					<ul>
   						<li>New Products</li>
   						<li>Brands</li>
   						<li>Kind of shoes</li>   				
   					</ul>
   				</li>
   			</div>
 
   			<div class="element_menu2">   			 			 				      
	   		 	<li>Women
	   		 		<ul>
	   					<li>New Products</li>
	   					<li>Brands</li>
	   					<li>Kind of shoes</li>   				
	   				</ul>
	   			</li> 
   			</div>
 
   			<div class="element_menu3">   			 			 				      
	   		 	<li>Children
	   		 		<ul>
	   					<li>New Products</li>
	   					<li>Brands</li>
	   					<li>Kind of shoes</li>   				
	   				</ul>
	   			</li> 
   			</div>	
		</ul> 
        <p>
 
         </p>      	  		
   	</div>
 
	<div id="corps">	
    	<div id="slideshow">
        	<p>
        		<img id="preview" src="images/img1.jpg" alt="img1"/>
 
        	</p>
        </div>
 
 
		<div id="browsmosaic">
		<div class="firstline">
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="f1"/></a>
 
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="colums_needmargin"/></a>
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="colums_needmargin" /></a>
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="colums_needmargin"/></a>
 
		</div>
 
        <div class="secondline">
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="f1"/></a>
 
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="colums_needmargin"/></a>
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="colums_needmargin" /></a>
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="colums_needmargin"/></a>
 
		</div>
 
        <div class="thirdline">
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="f1"/></a>
 
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="colums_needmargin"/></a>
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="colums_needmargin" /></a>
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="colums_needmargin"/></a>
 
		</div>
 
        <div class="fourthline">
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="f1"/></a>
 
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="colums_needmargin"/></a>
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="colums_needmargin" /></a>
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="colums_needmargin"/></a>
 
		</div>
 
 
 
 
      </div>  	
   	</div>
 
	<div id="pied_de_page">	
   		<p>Copyright "New York Shoes NYS", all rights reserved</p>
   		<p>by ANDRE Valentin</p>
   		<p class="dateC">2011</p>
        <p><a href="mailto:valentin.ece@gmail.com">Contact</a></p> 
        <p><img id="logo" src="images/logo.png" alt="logo"/></p>  		
	</div>
 
 
 
 
 
   </body>
 
 
</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
16
17
18
19
20
21
22
23
24
25
26
//Déclaration des variables
 
var nbimg=3,hauteur=480,largeur=640,timer,slideshow,i,Delay=3000,currentimg=0,link,source;
 
var tab=new Array('images/img1.jpg','images/img2.jpg','images/img3.jpg');
 
 
 
 
 
 
 
function chgimg()
{
	currentimg++;
 
	if(currentimg>nbimg)
	{
		currentimg=1;
	}
	link=document.getElementById('preview');
	source=link.getAttribute('src');
	link.setAttribute('src',tab[currentimg]);
	setInterval("chgimg()",Delay);
 
}

vermine · 19/01/2011, 20h14

Oui parce que là vous relancez chaque fois un setInterval. Ce n'est pas la fonction chgimg() qui doit être appelée au onload mais bien la fonction demarrage(). Et ceci ne doit apparaitre que dans demarrage() :

Code :

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

setInterval("chgimg()",Delay);

nike547 · 19/01/2011, 20h26

Bon voila mon periple est en quelque sorte terminé. Merci beaucoup à tous le monde. Autre probleme si cela vous interresse j'aimerais faire un diaporama qui défile vers la gauche un peu comme celui du site d'apple dans la section iphone. Merci

nounetmasque · 20/01/2011, 22h45

Pour le diaporama ressemblant au site d'Apple je t'oriente vers les sliders JQuery (une recherche Google t'aidera).

19/01/2011, 08h11	#2
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 802 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 802 Points : 35 807 Points : 35 807	Au moment ou ton script est appelé et l'instruction Code : Sélectionner tout - Visualiser dans une fenêtre à part link=document.getElementById('image'); interprétée, le body n'a pas encore été créé, donc pas d'id image... __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

19/01/2011, 08h50	#3
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 2 686 Détails du profil Informations personnelles : Âge : 27 Informations forums : Inscription : mars 2008 Messages : 2 686 Points : 5 768 Points : 5 768	Bonjour, Je vois aussi d'autres problèmes comme cette instruction : Code : Sélectionner tout - Visualiser dans une fenêtre à part link.setAttribute('source',tab[currentimg]); qui devrait sans doute être : Code : Sélectionner tout - Visualiser dans une fenêtre à part link.setAttribute('src',tab[currentimg]); ;-) Je ne sais d'ailleurs pas pourquoi on récupère la source (elle sert plus loin ?). Il reste le fait que ce changement de source de l'image n'est appelé qu'une fois. Il serait mieux de préciser ce bloc d'instructions en fin de fonction chgimg(). __________________ Elen Poukram - Isegoria - Sandawe
	00

19/01/2011, 19h58	#9
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 2 686 Détails du profil Informations personnelles : Âge : 27 Informations forums : Inscription : mars 2008 Messages : 2 686 Points : 5 768 Points : 5 768	A priori elle sera appelée toutes les 3 secondes : Code : Sélectionner tout - Visualiser dans une fenêtre à part Delay=3000 Pour peu que vous ayez suivi le conseil de Bovino et de Loceka en appelant la fonction lorsque le body est chargé : Code : Sélectionner tout - Visualiser dans une fenêtre à part <body onload="demarrage()"> __________________ Elen Poukram - Isegoria - Sandawe
	10

19/01/2011, 20h14	#12
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 2 686 Détails du profil Informations personnelles : Âge : 27 Informations forums : Inscription : mars 2008 Messages : 2 686 Points : 5 768 Points : 5 768	Oui parce que là vous relancez chaque fois un setInterval. Ce n'est pas la fonction chgimg() qui doit être appelée au onload mais bien la fonction demarrage(). Et ceci ne doit apparaitre que dans demarrage() : Code : Sélectionner tout - Visualiser dans une fenêtre à part setInterval("chgimg()",Delay); __________________ Elen Poukram - Isegoria - Sandawe
	10

20/01/2011, 22h45	#14
nounetmasque Membre éprouvé Inscription : janvier 2003 Messages : 491 Détails du profil Informations forums : Inscription : janvier 2003 Messages : 491 Points : 488 Points : 488	Pour le diaporama ressemblant au site d'Apple je t'oriente vers les sliders JQuery (une recherche Google t'aidera). __________________ "Dieu reste muet, si seulement nous pouvions convaincre l'être humain d'en faire autant."
	00

19/01/2011, 13h36	#5
nike547 Invité de passage valentin andre Inscription : mai 2010 Messages : 10 Détails du profil Informations personnelles : Nom : valentin andre Informations forums : Inscription : mai 2010 Messages : 10 Points : 0 Points : 0	Merci beaucoup pour vos réponses. Je vais tester tout ça et vous tenir au courant.
	00

19/01/2011, 19h52	#8
nike547 Invité de passage valentin andre Inscription : mai 2010 Messages : 10 Détails du profil Informations personnelles : Nom : valentin andre Informations forums : Inscription : mai 2010 Messages : 10 Points : 0 Points : 0	Le problème justement je pense c'est que la fonction chgimg() n'est pas appelé tous les x temps. Mais je ne sais pas où l'appeler et surtout comment.
	00

19/01/2011, 20h04	#10
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 930 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 930 Points : 4 744 Points : 4 744	Bonjour, avec le code que je vois la seule chose que fait ton setInterval, est d'incrémenter ton compteur currentimg et le ramené à 1 quand il dépasse le nombre d'image. En aucun cas il n'interagit avec une autre fonction.
	00

19/01/2011, 20h26	#13
nike547 Invité de passage valentin andre Inscription : mai 2010 Messages : 10 Détails du profil Informations personnelles : Nom : valentin andre Informations forums : Inscription : mai 2010 Messages : 10 Points : 0 Points : 0	Bon voila mon periple est en quelque sorte terminé. Merci beaucoup à tous le monde. Autre probleme si cela vous interresse j'aimerais faire un diaporama qui défile vers la gauche un peu comme celui du site d'apple dans la section iphone. Merci
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email