nul : JS débutant

**Givemefive** · 04/01/2007, 18h30

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 :

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
 
 
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 :

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
 
<!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>

**ryan** · 04/01/2007, 19h27

Yop!

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

**Givemefive** · 04/01/2007, 19h56

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 :

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
 
 
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 :

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
 
<!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>

**dingoth** · 04/01/2007, 20h20

dernière ligne du fichier JavaScript :

Code :

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

document.body.onload=menu;

et pas

Code :

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

document.body.onload=menu();

**Givemefive** · 04/01/2007, 20h48

salut dingoth,
en fait quand je mets

Code :

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

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 :

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

1
2
 
document.body.onload=menu;

je n'ai pas l'alerte... bizzare non ?

**dingoth** · 04/01/2007, 21h07

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 :

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

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

**Givemefive** · 04/01/2007, 21h13

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

JS:

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
 
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 :

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
 
<!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>

**dingoth** · 04/01/2007, 22h10

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

Code :

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

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.

**Givemefive** · 04/01/2007, 23h11

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 :

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
 
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 :

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
 
<!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>

**dingoth** · 04/01/2007, 23h14

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

**Givemefive** · 05/01/2007, 11h45

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 ???

**dingoth** · 05/01/2007, 13h24

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.

nul : JS débutant

JavaScript

Discussions similaires

Partager

Partager