Discussion :

[Dereck07]

Bonjour,

Je suis débutant en Java script et je bloque sur un code que j'ai modifié.

Voila le html:

Code html :

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

1
2
3
4
5
<div id="menu_vertical">
	<div ID=mv1>
		<SCRIPT LANGUAGE="JavaScript" SRC="menu_dyn_vert.js"></SCRIPT>
	</div>
</div>

Et voici le menu_dyn_vert.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
40
41
bgcolor_Default='#7B7B7B'; // couleur du menu horizontal par defaut
bgcolor_MousseOn='#FF7B7B'; // couleur du menu horizontal quand souris survole le menu
bgcolor_Selected='#7B7BFF'; // couleur du menu horizontal après souris click
 
var MenuTitle = new Array;
MenuTitle[0]='Menu1';
MenuTitle[1]='Menu2';
MenuTitle[2]='Menu3';
MenuTitle[3]='Menu4';
 
document.write('<style type="text/css">');
document.write('#topgauche { position:absolute;  z-index:10; }');
/*document.write('A:hover.ejsmenu {color:#000000; text-decoration:none;}');
document.write('A.ejsmenu {color:#000000; text-decoration:none;}');*/
document.write('</style>');
 
menu_pos = -1;
 
function menu_draw(pos)
	{
	html_text="<TABLE CELLPADING=0 CELLSPACING=0 BORDER=0 WIDTH=100% HEIGHT=25><TR>";
	for(a=0;a<MenuTitle.length;a++)
		{
		if (pos==a)
			{
			html_text=html_text+"<TD WIDTH=400 ALIGN=center bgcolor="+bgcolor_Selected+' onMouseOver="this.style.background=\''+bgcolor_Selected+'\'" onMouseOut="this.style.background=\''+bgcolor_Selected+'\'" onClick=\menu_draw(pos)\'"><A onClick="return(true)" href=#><FONT SIZE=4 FACE="Verdana">'+MenuTitle[a]+'</FONT></a></TD>';
			}
		else
			{
			html_text=html_text+"<TD WIDTH=400 ALIGN=center bgcolor="+bgcolor_Default+' onMouseOver="this.style.background=\''+bgcolor_MousseOn+'\'" onMouseOut="this.style.background=\''+bgcolor_Default+'\'" onClick=\menu_draw(pos)\'"><A onClick="return(true)" href=#><FONT SIZE=4 FACE="Verdana">'+MenuTitle[a]+'</FONT></a></TD>';
			}
		}
	html_text+="</TR></TABLE>";
	alert("Vous m'avez cliqué "+pos);
	if(document.getElementById)
		document.getElementById("mv1").innerHTML = html_text;
	else
		document.write(html_text);
	}
 
menu_draw(menu_pos);

Le code s'execute bien au premier lancement.
Losrque je survole les onglets avec la souris il change bien de couleur.
Parcontre quand je clique dessus rien ne se passe.
J'ai même pas l'alerte qui se lance, se qui prouve que la fonction menu_draw() n'est pas appelée sur l'action d'un clique alors qu'elle deverait puisque je l'ai associée à l'evenement onClick.

Je ne comprends pas ce qui cloche. Please, quelqu'un a-t-il une idée ?

[SylvainPV]

Ouch. Il y a tellement de trucs qui ne vont pas que je ne sais pas par où commencer. Avant toute chose il va falloir corriger tous les problèmes potentiels de ton code.

- les balises script sont à placer juste avant la fermeture du tag </body>
- les tags et attributs sont tous à écrire en minuscules
- l'attribut id doit être entouré de guillemets
- les variables javascript doivent être déclarées avec la mot-clé var
- il faut écrire var MenuTitle = new Array(); ou var MenuTitle = [];.
- document.write est à éviter à tout prix. pour mettre du style css, utilise des fichiers css à part et la balise link. Pour du HTML, utilise les méthodes de l'API DOM (document.appendChild etc...)
- pour gérer des évènements par rapport à des élements HTML générés en Javascript, il vaut bien mieux passer directement par les attributs Javascript que par les attributs HTML:

Code :

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

1
2
3
4
var elem = document.createElement("td"); 
elem.onclick = function(event){ ... };
//ou
elem.addEventListener("mouseover", function(){ ... });

[NoSmoking]

Bonjour,
je dirais que dans ton cas il ne t'ai nullement besoin d'utiliser document.write.

Comme l'a dit SylvainPV, le style peut directement être écrit sans passer par un document.write.

Les lignes suivantes

Code :

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

1
2
3
4
5
6
html_text +='</TR></TABLE>';
alert("Vous m'avez cliqué "+pos);
if(document.getElementById)
	document.getElementById("mv1").innerHTML = html_text;
else
	document.write(html_text);

peuvent ce résumer à

Code :

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

1
2
html_text +='</TR></TABLE>';
document.getElementById("mv1").innerHTML = html_text;

il y a belle burette que document.getElementById est reconnu par TOUS les navigateurs.


Le point qui me paraît le plus critiquable, outre passer par une TABLE pour créer un menu, est la façon d'écrire le code que tu va injecter via le innerHTML.

exemple:

Code :

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

html_text=html_text+'<td width="400" align="center" bgcolor="' +bgcolor_Selected +'" onmouseover="this.style.background=\'' +bgcolor_Selected +'\'" onmouseout="this.style.background=\'' +bgcolor_Selected +'\'" onclick="menu_draw('+a +')"><a onclick="return(true)" href=#><font size=4 face="Verdana">' +MenuTitle[a]+'</font></a></td>';

tu as des problèmes dans l’alternance entre les simples quottes et les doubles.

Enfin, ce type de menu est réalisable en pure CSS et si tu veux impérativement "backgrounder" le menu actif, il te faudra effectivement un peu de javascript.

menu simple

Code html :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Menu simple</title>
<style>
html, body{
  font-family:Verdana;
  font-size:100%;
}
#ul_menu{
  margin:0;
  padding:0;
  list-style:none;
  width:100%;
  background:#7B7B7B;
  line-height:1.5em;
  height:1.5em;
}
#ul_menu li{
  display:inline-block;
  float:left;
  width:25%;
  height:100%;
  text-align:center;
}
#ul_menu li a{
  font-size:1.1em;
  width:100%;
  height:100%;
  display:block;
}
#ul_menu li:hover{
  background:#FF7B7B;
}
ul li a:target, ul li a:active,  ul li a:focus{
  background:#7B7BFF;
}
</style>
</head>
<body>
<ul id="ul_menu">
  <li><a href="#">Menu1</a></li>
  <li><a href="#">Menu2</a></li>
  <li><a href="#">Menu3</a></li>
  <li><a href="#">Menu4</a></li>
</ul>
</body>
</html>

[Dereck07]

oui j'étais pas du tout parti avec la bonne philosophie.
Merci pour vos reponses.

NoSomoking, j'ai repris ton code auquel j'ai ajouté un peu de javastript en reprennant l'exemple de SylvainPV:

Code html :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Menu simple</title>
<style>
html, body{
  font-family:Verdana;
  font-size:100%;
}
#ul_menu{
  margin:0;
  padding:0;
  list-style:none;
  width:100%;
  background:#7B7B7B;
  line-height:1.5em;
  height:1.5em;
}
#ul_menu li{
  display:inline-block;
  float:left;
  width:25%;
  height:100%;
  text-align:center;
}
#ul_menu li a{
  font-size:1.1em;
  width:100%;
  height:100%;
  display:block;
}
#ul_menu li:hover{
  background:#FF7B7B;
}
ul li a:target, ul li a:active,  ul li a:focus{
  background:#7B7BFF;
}
</style>
</head>
<body>
<ul id="ul_menu">
  <li><a href="#">Menu1</a></li>
  <li><a href="#">Menu2</a></li>
  <li><a href="#">Menu3</a></li>
  <li><a href="#">Menu4</a></li>
</ul>
<SCRIPT LANGUAGE="JavaScript" SRC="javascript.js"></SCRIPT>
</body>
</html>

javascript.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
var elem = document.getElementById("ul_menu"); 
elem.onclick = function(event){ 
alert("Vous m'avez clique ");  // ok fonctionne
elem.style.fontSize = "12px";// ok fonctionne
 
  var el2 = elem.childNodes;
  el2.style.backgroundColor = '#FFFFFF'; // ne fonctionne pas
 //elem.innerHTML = "Salut tout le monde !!";
  while (el2) {
    el2.addEventListener("mouseover", function(){ el2.style.backgroundColor = '#7BFFFF'; }); // ne fonctionne pas
    el2.style.backgroundColor = '#7BFFFF'; // ne fonctionne pas
    el2 = el2.nextSibling;
  }
 
}

Il y a du progré, maintenant quand je clique sur un onglet du menu ca génère un évenement java qui affiche l'alerte.
J'arrive à modifier les propriétées de l'objet principale mais j'arrive pas à acceder aux sous-objets.
Tous se comporte comme si elem.childNodes me revoit null alors que je m'attends à ce qu'il me revoint le premier element <li></li> et aprés j'aurais aimé modifier définitivement la couleur de celui où la souris est dessus...
Vous voyez ce qui cloche dans le nouveau code?

[Bovino]

Comme le pluriel l'indique, childNodes renvoie une collection et il n'est pas possible d'affecter des styles à une collection !
Il faut boucler sur chaque élément pour affecter les styles individuellement.

[Dereck07]

Ok , j'ai modifié le script comme ceci:

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
const bgcolor_Default='#7B7B7B'; // couleur du menu horizontal par defaut
const bgcolor_MousseOn='#FF7B7B'; // couleur du menu horizontal quand souris survole le menu
const bgcolor_Selected='#7B7BFF'; // couleur du menu horizontal aprés un clik de souris

var elem = document.getElementById("ul_menu"); 
elem.onclick = function(event){ 

var el2 = elem;
el2 = el2.firstChild;
while (el2) {

  if (el2.nodeName=="LI")
  {
  el2.style.backgroundColor = '#FFFFFF';
  el2.addEventListener("onMouseOver", function(){ el2.style.backgroundColor = bgcolor_Selected});
  }

  el2 = el2.nextSibling;
}

Maintenant j'arrive à acceder au noeud enfant et à modifier les propriétés de ceux-ci. Ce qui est un pas en avant.
Parcontre je n'arrive pas à détecter celui qui a recu le clique. Le listener ne voit pas que la souris est dessus. Il semble que la détection se fait au momment ou la souris arrive.
J'ai essayé avec onFocus, onMouseOut ca ne marche pas ...

Enfait dans un second temps, je voudrais créer le menu dynamiquement donc je ne peux pas faire de Listner séparé pour chaque balise <LI>

S'il vous plait, quelqu'un sais comment je peux faire pour savoir lequel des objets a recu le clique dans la boucle while ?

[SylvainPV]

Dans ton code tu crées un listener au callback d'un autre listener. Autrement dit si tu cliques 10 fois sur #ul_menu, tu vas 10 fois associer un event listener mouseover sur tes éléments el2 et ta fonction s'exécutera 10 fois quand tu passeras la souris dessus !

Il vaut donc mieux ajouter tes listeners et faire ton binding évènementiel au moment où tu crées les éléments HTML, et nulle part ailleurs.

Aussi plutôt que de manipuler le style en Javascript, c'est plus propre de changer la classe de l'élément HTML et d'écrire des styles différents dans ta feuille CSS.

Enfin ne pas confondre Java et Javascript. Ca n'a rien à voir Si tu veux dire Javascript en abrégé écris JS.

Un peu de code pour t'inspirer:

Code :

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

1
2
3
4
5
6
7
8
 
var onglets = document.querySelectorAll("#ul_menu li"); 
for(var i = 0; i < onglets.length; i++){
  var onglet = onglets[i];
  onglet.addEventListener("click", function(){
    this.className = "selected";    
    alert("Vous avez cliqué sur l'onglet "+this.innerHTML);
  });

http://codepen.io/anon/pen/egDkj

[Dereck07]

C'est parfait! C'est pile poile ce que je cherchais.

Encore mille fois merci