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

fonction document.getElementById

JavaScript

Discussions similaires

Partager

Partager