Problème avec getelementbyid

cyrus.b Messages postés 3 Date d'inscription Statut Membre Dernière intervention -
Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention - 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   -->

Afficher la suite

3 réponses

Réponse 1 / 3

Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention 527

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 Statut Membre Dernière intervention

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 Statut Membre Dernière intervention 527

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 Statut Membre Dernière intervention

On peut visiter la page sur yaroo.free.fr

Discussions similaires

document.getElementById('mess').style.display = 'block' ?

Votre réponse

Discussions similaires