getElementById ne fonctionne pas

**cyrus.b** · 05/10/2015, 21h09

Bonjour,

Voila après trois jours de recherches sans succès, j’espère que vous puissiez m'aider à solutionner ce problème.
J'ai un drop menu qui s'active via getelementbyid. Le code marche bien si et seulement il est dans un fichier index.php mais la même code placé dans un fichier "user.html"
qui est appelé via Header.html, ne fonctionne plus. Je pense à un profondeur sur la feuille mais je ne peut pas savoir quoi faire.

Voila le code css: user.css

Code css :

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
<!--  start user.css -->
 
#U_left{	float:left;}
 
#U_center
{
	float:left;
	width:55px;
	font-size:13px;
	text-align:center;
	height:23px;
	color:white;
	border-right:1px solid white;
}
 
#U_right
{
	width:32px;
	margin-left:85px;
	padding-top:4px;
	text-align:center;
	height:26px;
	font-size:13px;
	text-align:center;
	border-left:1px solid white;
}
 
#U_left img{	width:30px; }
 
#U_container
{
	margin-left:250px;
	width:117px;
	border-top:3px solid black;
	border-right:2px solid black;
	border-left:3px solid black;
	border-bottom:1px solid black;
	-moz-border-top-right-radius: 2px;
	border-radius:5px 5px 0px 0px;
	background-color: black;
}
 
#U_container, #U_left { 	height:30px; }
 
.Umenu_button
{
    margin-top:-5px;
    background-color: black;
    height:32px;
    color: #fff;
}
 
.U_hidden_menu
{
    color: white;
    width: 121px;
    height: 60px;
    margin-left: -89px;
    position: absolute;
    display: none;
    background-color: black;
	border-top:1px solid #ccc;
 
    border-bottom:4px solid #ccc;
    -moz-border-bottom-right-radius: 20px;
    -moz-border-bottom-left-radius: 20px;
    border-radius:0px 0px 7px 7px;
	border-right:2px solid #ccc;
 
}
#User_Button
{
	cursor:pointer;
	height:19px
	color:white;
	font-size:23px;
}
 
.U_hidden_menu ul
{
        list-style:none;
	text-align:left;
	margin-left:2px;
	font-size:15px;
}
 
#Drop_Button {}
 
<!-- fin user.css -->

voici le code index.php ou user.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
<script type="text/javascript">
function Show_User(){
    var menu = document.getElementById('Drop_Login');
 
    alert(menu);
 
    if(menu.style.display == 'block'){
        menu.style.display = 'none';
    }else {
        menu.style.display = 'block';
    }
}
</script>
 
<body>
 
<div id="U_container">
 <div id="U_left"><img src="/Img/Users/user.jpg" /></a></div>
 <div id="U_center">usernom</div>
 <div id="U_right">
  <div id="User_Button" class="Umenu_button" onclick="Show_User()">?</div>
  <div id="Drop_Login" class="U_hidden_menu"> <ul> <li>profile</li> <li>Exit</li> </ul> </div>
 </div>
</div>
 
</body>

Voici le code via Header.html et le fichier index sera nommé en user.html

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--    Start  Header   -->
 
<div class="HeaderMask Header">
 <div class="colmid">
  <div class="colleft">
   <div class="WcData"> <a href="#"><img src="/Img/logo.jpg" /></a> </div>
   <div class="WlData"> <a href=""><img src="/Img/biato.png" />  </a> </div>
   <div class="WrData"> <?php include('Root/Fr/Html/user.html'); ?> </div>
  </div>
 </div>
</div>
 
<!--    End  Header   -->

Merci pour vos aides

i

**SylvainPV** · 06/10/2015, 14h59

Bonjour,

Pas d'erreur en console JavaScript ? Est-ce que tu peux utiliser le debugger de ton navigateur pour voir si tu passes bien dans la fonction Show_User ?

**cyrus.b** · 06/10/2015, 20h34

Bonsoir,

Pas d'erreur avec debuger, d’ailleurs une alert sur le retour de la function getElementById me donne soit block ou soit none.
Dernière trouvaille, le problème doit venir de Header, puisque le code marche même placé dans le Footer

Voila Url de site yaroo.free.fr

Merci et en attendant ie cherche, je cherche

**SylvainPV** · 06/10/2015, 23h15

Tu as essayé de mettre des breakpoints dans la fonction et de regarder le déroulement du code pas à pas ? C'est plus efficace que des alert() et bouger au hasard le code.

**cyrus.b** · 07/10/2015, 19h47

Je ne connais pas trop bien le breakpoint mais quand j'ajoute debugger; dans le code, il passe bien dans la fonction et l'objet menu est bien renseigné.
Ensuite il valide le teste sur block et valide menu.style.display='none.

Mais ce qui est énervant ce que placé la même code dans le footer, elle fonction.

Code :

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

1
2
3
4
5
6
7
var menu = document.getElementById("Drop_Login");    menu = div#Drop_Login.U_hidden_menu
 
if(menu.style.display == 'block'){  menu = div#Drop_Login.U_hidden_menu
        menu.style.display = 'none';
    }else {
        menu.style.display = 'block';
    }

A devenir fou

**SylvainPV** · 07/10/2015, 23h35

Es-tu sûr d'avoir un seul élément avec cet ID dans la page ? Pas de duplicat d'ID ?

Dans le CSS, pas de règle !important qui viendrait surcharger la règle en inline ?

**cyrus.b** · 08/10/2015, 21h17

Bonsoir,

Rien compris mais on ajoutant un heigt:50px à le problème est résolu.

Code css :

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

1
2
3
4
5
6
7
.U_hidden_menu ul
{
        list-style:none;
	text-align:left;
	margin-left:2px;
	font-size:15px;
}

Merci de tes conseilles et qui sait, peut-être à l'occasion d'autre erreurs ?

getElementById ne fonctionne pas

JavaScript

Discussions similaires

Partager

Partager