nul : JS débutant

Version imprimable

nul : JS débutant

Impossible de faire marcher mon tout premier javascript (non ca doit etre le 3è...) RIEN NE SE PASSE !!!! Ya manifestement quelque chose que je ne comprend pas... j'ai mis une alerte dans la fonction menu() qui doit s'executer au chargement de body et rien ne se passe... C'est surement un problème de syntaxe. Que le script ne marche pas (avec les document.getElementById et tout) passe encore mais la ca dépasse la logique (la mienne en tout cas...). Merci d'avance.

Le code JS :

Code:

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
 
 
function montre(obj,i){
  if(i==0) obj.className="visible";
  if(i==1) obj.getElementsByTagName('div')[0].className="visible";
}
 
function cache(obj,i){
  if(i==0) obj.className="hidden";
  if(i==1) obj.getElementsByTagName('div')[0].className="hidden";
}
 
function menu(){
 
alert("menu s'execute");
var i;
var li;
 
/*tests pas a pas de  li=document.getElementById('menu').getElementsByTagName('li'); */
 
if(li=document)){ alert("1");}
else { alert("bad");}
if(li=li.getElementById('menu')){ alert("2");}
else { alert("bad");}
if(li=li.getElementsByTagName('li')){ alert("3");}
else { alert("bad");}
 
  for(i=0;i<li.length;i++){
	li[i].onmouseover= function(){montre(this,1);};
	li[i].onmouseoout= function(){cache(this,1);};
	li[i].getElementsByTagName('div')[0].onmouseover= function(){montre(this,0);};
	li[i].getElementsByTagName('div')[0].onmouseout= function(){cache(this,0);};
  }
}
 
document.body.onload=menu();

le code HTML :

Code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
 
<head>
	<title>Bla Bla</title>
	<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
	<link rel="stylesheet" href="style/style.css" type="text/css" media="projection, screen, tv" />
	<!--[if lte IE 6]>
		<link rel="stylesheet" href="style/style-ie.css" type="text/css" media="projection, screen, tv" />
	<![endif]-->
	<script language="JavaScript" src="javascript/menu.js"></script>
 
</head>
 
<body>
  <ul id='menu'>
	<li><a id='selected' href='alo.htm'>Accueil</a></li>
 
 
	<li><a href='alo.htm'>Rubrique 1</a>
 
	<div class='hidden'>
	  <ul>
		<a href='blabla.htm'>Elément 1</a>
		<a href='blabla.htm'>Elément 2</a>
		<a href='blabla.htm'>Elément 3</a>
		<a href='blabla.htm'>Elément 4</a>
	  </ul>
	</div>
 
	</li>
 
	<li><a href='alo.htm'>Rubrique 2</a>
 
	<div class='hidden'>
	  <ul>
		<a href='blabla.htm'>Elément 1</a>
		<a href='blabla.htm'>Elément 2</a>
		<a href='blabla.htm'>Elément 3</a>
		<a href='blabla.htm'>Elément 4</a>
	  </ul>
	</div>
 
	</li>
	<li><a href='alo.htm'>Rubrique 3</a>
 
	<div class='hidden'>
	  <ul>
		<a href='blabla.htm'>Elément 1</a>
		<a href='blabla.htm'>Elément 2</a>
		<a href='blabla.htm'>Elément 3</a>
		<a href='blabla.htm'>Elément 4</a>
	  </ul>
	</div>
 
	</li>
	<li><a href='alo.htm'>Rubrique 4</a>
 
	<div class='hidden'>
		  <ul>
			<a href='blabla.htm'>Elément 1</a>
			<a href='blabla.htm'>Elément 2</a>
			<a href='blabla.htm'>Elément 3</a>
			<a href='blabla.htm'>Elément 4</a>
		  </ul>
		</div>
 
	</li>
 
	<li><a href='alo.htm'>Contact</a>
 
		<div class='hidden'>
		  <ul>
			<a href='blabla.htm'>E-mail</a>
			<a href='blabla.htm'>Coordonées</a>
			<a href='blabla.htm'>Commander</a>
			<a href='blabla.htm'>SAV</a>
		  </ul>
		</div>
 
	</li>
 
  </ul>
 
</body>
</html>

04/01/2007, 19h27
ryan

Yop!

Es-tu certain du chemin d'accès pour le fichier js?

RE : Yop!

Merci pour ta reponse...
Heu en fait yavait en effet une erreur de synthaxe que j'ai corrigé et maintenant jai bien mon alerte. En revanche en ce qui concerne les requetes DOM ca ne marche pas. Le debugger de Firefox me dit :

"Erreur : document.getElementById("menu") has no properties
Fichier source : file:///C:/Program%20Files/EasyPHP1-8/www/CSD/javascript/menu.js
Ligne : 17"

je n'arrive pas à obtenir ce tableau d'éléments <li> ... donc il bugge à partir du li=...

Pour info dans mon CSS j'ai une classe hidden à laquelle appartiennent tous les <div> contenus dans les <li> qui a comme propriété display:none;

Si tu as une idée...

Nouveau JS :

Code:

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
 
 
function montre(obj,i){
  if(i==0) obj.className="visible";
  if(i==1) obj.getElementsByTagName('div')[0].className="visible";
}
 
function cache(obj,i){
  if(i==0) obj.className="hidden";
  if(i==1) obj.getElementsByTagName('div')[0].className="hidden";
}
 
function menu(){
 
alert("menu s'execute");
var i;
var li;
 
if(li=document.getElementById("menu").getElementsByTagName("li")) alert("3");
else alert("bad");
 
  for(i=0;i<li.length;i++){
	li[i].onmouseover= function(){montre(this,1);};
	li[i].onmouseoout= function(){cache(this,1);};
	li[i].getElementsByTagName('div')[0].onmouseover= function(){montre(this,0);};
	li[i].getElementsByTagName('div')[0].onmouseout= function(){cache(this,0);};
  }
}
 
document.body.onload=menu();

et le HTML tjrs le mm :

Code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
 
<head>
	<title>Bla Bla</title>
	<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
	<link rel="stylesheet" href="style/style.css" type="text/css" media="projection, screen, tv" />
	<!--[if lte IE 6]>
		<link rel="stylesheet" href="style/style-ie.css" type="text/css" media="projection, screen, tv" />
	<![endif]-->
	<script language="JavaScript" src="javascript/menu.js"></script>
 
</head>
 
<body>
  <ul id='menu'>
	<li><a id='selected' href='alo.htm'>Accueil</a></li>
 
 
	<li><a href='alo.htm'>Rubrique 1</a>
 
	<div class='hidden'>
	  <ul>
		<a href='blabla.htm'>Elément 1</a>
		<a href='blabla.htm'>Elément 2</a>
		<a href='blabla.htm'>Elément 3</a>
		<a href='blabla.htm'>Elément 4</a>
	  </ul>
	</div>
 
	</li>
 
	<li><a href='alo.htm'>Rubrique 2</a>
 
	<div class='hidden'>
	  <ul>
		<a href='blabla.htm'>Elément 1</a>
		<a href='blabla.htm'>Elément 2</a>
		<a href='blabla.htm'>Elément 3</a>
		<a href='blabla.htm'>Elément 4</a>
	  </ul>
	</div>
 
	</li>
	<li><a href='alo.htm'>Rubrique 3</a>
 
	<div class='hidden'>
	  <ul>
		<a href='blabla.htm'>Elément 1</a>
		<a href='blabla.htm'>Elément 2</a>
		<a href='blabla.htm'>Elément 3</a>
		<a href='blabla.htm'>Elément 4</a>
	  </ul>
	</div>
 
	</li>
	<li><a href='alo.htm'>Rubrique 4</a>
 
	<div class='hidden'>
		  <ul>
			<a href='blabla.htm'>Elément 1</a>
			<a href='blabla.htm'>Elément 2</a>
			<a href='blabla.htm'>Elément 3</a>
			<a href='blabla.htm'>Elément 4</a>
		  </ul>
		</div>
 
	</li>
 
	<li><a href='alo.htm'>Contact</a>
 
		<div class='hidden'>
		  <ul>
			<a href='blabla.htm'>E-mail</a>
			<a href='blabla.htm'>Coordonées</a>
			<a href='blabla.htm'>Commander</a>
			<a href='blabla.htm'>SAV</a>
		  </ul>
		</div>
 
	</li>
 
  </ul>
 
</body>
</html>

04/01/2007, 20h20
dingoth

dernière ligne du fichier JavaScript :

Code:

document.body.onload=menu;

et pas

Code:

document.body.onload=menu();
04/01/2007, 20h48
Givemefive
salut dingoth,
en fait quand je mets
Code:

1 2 document.body.onload=menu();
j'ai bien le message d'alerte qui me dit que ma fonction menu s'execute alors quand j'essaie avec
Code:

1 2 document.body.onload=menu;
je n'ai pas l'alerte... bizzare non ?

C'est normal que tu l'aies lorsque tu fais selon la première méthode : le script est exécuté lorsque ton navigateur arrive à cette ligne, puisque avec les parenthèses finales, tu appelles le code. Mais le DOM n'est pas encore pleinement construit. Il ne connait donc pas le reste de ton document.

Pour le reste, je n'ai pas regardé.

Allez, en cadeau une petit florilège des méthodes d'ajout au chargement. :)
Code:

1 2 3 if (window.addEventListener) { window.addEventListener("load", menu, false); } else if (document.addEventListener) { document.addEventListener("load", menu false); } else if (window.attachEvent) { window.attachEvent("onload", menu); }
Ca devrait fonctionner ;)

Re: message

merci pour ta reponse dingoth... Malheuresement cela ne fonctionne tjrs pas. J'ai suivi tes conseils mais...

JS:

Code:

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
 
function montre(obj,i){
  if(i==0) obj.className="visible";
  if(i==1) obj.getElementsByTagName('div')[0].className="visible";
}
 
function cache(obj,i){
  if(i==0) obj.className="hidden";
  if(i==1) obj.getElementsByTagName('div')[0].className="hidden";
}
 
function menu(){
 
alert("menu s'execute");
var i;
var li;
 
if(li=document.getElementById("menu").getElementsByTagName("li")) alert("3");
else alert("bad");
 
  for(i=0;i<li.length;i++){
	li[i].onmouseover= function(){montre(this,1);};
	li[i].onmouseoout= function(){cache(this,1);};
	li[i].getElementsByTagName('div')[0].onmouseover= function(){montre(this,0);};
	li[i].getElementsByTagName('div')[0].onmouseout= function(){cache(this,0);};
  }
}
 
if (window.addEventListener) { window.addEventListener("load", menu, false); } 
else if (document.addEventListener) { document.addEventListener("load", menu false); } 
else if (window.attachEvent) { window.attachEvent("onload", menu); }

HTML:

Code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
 
<head>
	<title>Bla Bla</title>
	<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
	<link rel="stylesheet" href="style/style.css" type="text/css" media="projection, screen, tv" />
	<!--[if lte IE 6]>
		<link rel="stylesheet" href="style/style-ie.css" type="text/css" media="projection, screen, tv" />
	<![endif]-->
	<script language="JavaScript" src="javascript/menu.js"></script>
 
</head>
 
<body>
  <ul id='menu'>
	<li><a id='selected' href='alo.htm'>Accueil</a></li>
 
 
	<li><a href='alo.htm'>Rubrique 1</a>
 
	<div class='hidden'>
	  <ul>
		<a href='blabla.htm'>Elément 1</a>
		<a href='blabla.htm'>Elément 2</a>
		<a href='blabla.htm'>Elément 3</a>
		<a href='blabla.htm'>Elément 4</a>
	  </ul>
	</div>
 
	</li>
 
	<li><a href='alo.htm'>Rubrique 2</a>
 
	<div class='hidden'>
	  <ul>
		<a href='blabla.htm'>Elément 1</a>
		<a href='blabla.htm'>Elément 2</a>
		<a href='blabla.htm'>Elément 3</a>
		<a href='blabla.htm'>Elément 4</a>
	  </ul>
	</div>
 
	</li>
	<li><a href='alo.htm'>Rubrique 3</a>
 
	<div class='hidden'>
	  <ul>
		<a href='blabla.htm'>Elément 1</a>
		<a href='blabla.htm'>Elément 2</a>
		<a href='blabla.htm'>Elément 3</a>
		<a href='blabla.htm'>Elément 4</a>
	  </ul>
	</div>
 
	</li>
	<li><a href='alo.htm'>Rubrique 4</a>
 
	<div class='hidden'>
		  <ul>
			<a href='blabla.htm'>Elément 1</a>
			<a href='blabla.htm'>Elément 2</a>
			<a href='blabla.htm'>Elément 3</a>
			<a href='blabla.htm'>Elément 4</a>
		  </ul>
		</div>
 
	</li>
 
	<li><a href='alo.htm'>Contact</a>
 
		<div class='hidden'>
		  <ul>
			<a href='blabla.htm'>E-mail</a>
			<a href='blabla.htm'>Coordonées</a>
			<a href='blabla.htm'>Commander</a>
			<a href='blabla.htm'>SAV</a>
		  </ul>
		</div>
 
	</li>
 
  </ul>
 
</body>
</html>

Effectivement, j'ai oublié une virgule en recopiant le texte entre 'menu' et 'false' de la seconde ligne ... -_-'
Code:

1 2 3 if (window.addEventListener) { window.addEventListener("load", menu, false); } else if (document.addEventListener) { document.addEventListener("load", menu, false); } else if (window.attachEvent) { window.attachEvent("onload", menu); }
Là, j'ai testé sur Firefox (j'ai rien d'autre), j'ai pas d'erreur et j'ai une popup qui s'affiche avec "menu s'execute", puis une avec "3". Mais n'ayant aucun CSS, je ne sais pas ce que je dois voir.

Edit : et j'ai également une erreur javascript me disant qu'un <div> n'existe pas. Il s'agit du premier élément. Autant tester l'existence des <div> avant d'exécuter quelque chose sur eux, comme en regardant si li[i].getElementsByTagName('div').length > 0.

Ca marche !!!

merci dingoth ! ca marche enfin... Je n'avais pas envisagé que le code ne suivait pas son cours si il y avait une erreur de type div non trouvé ... Je comptais regler ça apres... Je commence enfin à comprendre un peu comment marche ce langage.

Je met le code final à tt hasard :

JS :

Code:

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
 
function montre(obj,i){
  if(i==0) obj.className="visible";
 
  if(i==1){ 
	if(obj.getElementsByTagName('div')[0]) obj.getElementsByTagName('div')[0].className="visible";
  }
}
 
function cache(obj,i){
  if(i==0) obj.className="hidden";
 
  if(i==1){ 
	if(obj.getElementsByTagName('div')[0]) obj.getElementsByTagName('div')[0].className="hidden";
  }
}
 
function menu(){
 
alert("menu s'execute");
var i;
var li;
 
if(li=document.getElementById("menu").getElementsByTagName("li")) alert("3");
else alert("bad");
 
  for(i=0;i<li.length;i++){
	li[i].onmouseover= function(){montre(this,1);};
	li[i].onmouseout= function(){cache(this,1);};
	if(li[i].getElementsByTagName('div')[0]){
		li[i].getElementsByTagName('div')[0].onmouseover= function(){montre(this,0);};
		li[i].getElementsByTagName('div')[0].onmouseout= function(){cache(this,0);};
	}
  }
}
 
if (window.addEventListener) { window.addEventListener("load", menu, false); } 
else if (document.addEventListener) { document.addEventListener("load", menu, false); } 
else if (window.attachEvent) { window.attachEvent("onload", menu); }

HTML :

Code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
 
<head>
	<title>Bla Bla</title>
	<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
	<link rel="stylesheet" href="style/style.css" type="text/css" media="projection, screen, tv" />
	<!--[if lte IE 6]>
		<link rel="stylesheet" href="style/style-ie.css" type="text/css" media="projection, screen, tv" />
	<![endif]-->
	<script language="JavaScript" src="javascript/menu.js"></script>
 
</head>
 
<body>
  <ul id='menu'>
	<li><a id='selected' href='alo.htm'>Accueil</a></li>
 
 
	<li><a href='alo.htm'>Rubrique 1</a>
 
	<div class='hidden'>
	  <ul>
		<a href='blabla.htm'>Elément 1</a>
		<a href='blabla.htm'>Elément 2</a>
		<a href='blabla.htm'>Elément 3</a>
		<a href='blabla.htm'>Elément 4</a>
	  </ul>
	</div>
 
	</li>
 
	<li><a href='alo.htm'>Rubrique 2</a>
 
	<div class='hidden'>
	  <ul>
		<a href='blabla.htm'>Elément 1</a>
		<a href='blabla.htm'>Elément 2</a>
		<a href='blabla.htm'>Elément 3</a>
		<a href='blabla.htm'>Elément 4</a>
	  </ul>
	</div>
 
	</li>
	<li><a href='alo.htm'>Rubrique 3</a>
 
	<div class='hidden'>
	  <ul>
		<a href='blabla.htm'>Elément 1</a>
		<a href='blabla.htm'>Elément 2</a>
		<a href='blabla.htm'>Elément 3</a>
		<a href='blabla.htm'>Elément 4</a>
	  </ul>
	</div>
 
	</li>
	<li><a href='alo.htm'>Rubrique 4</a>
 
	<div class='hidden'>
		  <ul>
			<a href='blabla.htm'>Elément 1</a>
			<a href='blabla.htm'>Elément 2</a>
			<a href='blabla.htm'>Elément 3</a>
			<a href='blabla.htm'>Elément 4</a>
		  </ul>
		</div>
 
	</li>
 
	<li><a href='alo.htm'>Contact</a>
 
		<div class='hidden'>
		  <ul>
			<a href='blabla.htm'>E-mail</a>
			<a href='blabla.htm'>Coordonées</a>
			<a href='blabla.htm'>Commander</a>
			<a href='blabla.htm'>SAV</a>
		  </ul>
		</div>
 
	</li>
 
  </ul>
 
</body>
</html>

04/01/2007, 23h14
dingoth

Heureux d'avoir pu aider :)

Et quand un problème est résolu, il est de bon ton de cliquer sur le bouton Résolu ci-dessous ;)
05/01/2007, 11h45
Givemefive

Une petite question subsiste ...

Rebonjour,
Je suppose que mon JS ne marchera pas pour IE 4 et inférieur car pour cela il faut utiliser l'element all. Je me trompes ??? :aie:
05/01/2007, 13h24
dingoth

Non, tu ne te trompes pas. Désolé :-/

Mais tout dépend du public auquel est destinée ton application. IE4 n'était fourni que sur Windows 98, première édition et le 2e édition a déjà IE5, si je ne me trompe pas (mais je peux me tromper, hein ;) ). Est-ce possible que de telles personnes dans ton public utilisent un tel système d'exploitation ? Tu peux aisément faire le lien avec la réponse dont tu as besoin.