Problème avec getelementbyid

Fermé

cyrus.b Messages postés 3 Date d'inscription mardi 6 octobre 2015 Statut Membre Dernière intervention 6 octobre 2015 - 6 oct. 2015 à 14:54
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 7 oct. 2015 à 09:13

Bonjour,

Autodidacte en IHM, 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 sais pas comment détecter le probleme.

Voila le code css: user.css


<!--  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 HTML user.html ou index.html


<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 fichier Header


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

3 réponses

Réponse 1 / 3

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
6 oct. 2015 à 16:22

Salut,

As tu un message d'erreur javascript dans la console de développement du navigateur (raccourci F12) ?

Il est étrange que ta balise script soit placé juste avant la balise body. En général les script doivent être situé dans la balise head ou à la fin du document avant la fermeture de la balise body.

Bonne journée

Réponse 2 / 3

cyrus.b Messages postés 3 Date d'inscription mardi 6 octobre 2015 Statut Membre Dernière intervention 6 octobre 2015
Modifié par cyrus.b le 6/10/2015 à 18:53

Bonjour,

J'ai deux messages d'erreurs mais rien à voir avec ce partie. Pour ce qui est la balise, tu as raison mais c'est juste une mauvaise copie ici. A vraie dire, le CSS est dans un fichier
et html dans user.html. Le script placé dans user.html ou Header ou index ou même Lib.js
rien à faire

Voici la user.html


<div id="U_container">
 <div id="U_left"><img src="/Img/Users/kazem.jpg" /></a></div>
 <div id="U_center">kazemert</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>

<script type="text/javascript">
function Show_User(){
    var menu = document.getElementById('Drop_Login');

    if(menu.style.display == 'block'){
        menu.style.display = 'none';
    }else {
        menu.style.display = 'block';
    }
}
</script>

On peut visiter la page sur yaroo.free.fr

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
7 oct. 2015 à 09:13

Ton code est pourtant fonctionnel. C'est surement les premières erreurs javascript qui bloque le reste de l'exécution. Essaye de corriger ces erreurs, ton code devrait alors fonctionner.

Réponse 3 / 3

cyrus.b Messages postés 3 Date d'inscription mardi 6 octobre 2015 Statut Membre Dernière intervention 6 octobre 2015
6 oct. 2015 à 18:52

On peut visiter la page sur yaroo.free.fr

Newsletters