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

nul : JS débutant

JavaScript

Vue hybride

Discussions similaires

Partager

Partager