La boucle for et les nodlist

Fermé
Aime2019 Messages postés 4 Date d'inscription vendredi 29 mars 2019 Statut Membre Dernière intervention 30 mars 2019 - Modifié le 29 mars 2019 à 15:34
Aime2019 Messages postés 4 Date d'inscription vendredi 29 mars 2019 Statut Membre Dernière intervention 30 mars 2019 - 30 mars 2019 à 11:06
Bonjour a tout
Je suis débutant en JavaScript et aussi nouveau sur le forum
J'aisse depuis un moment de d'associer un événement "click" a un ensemble d'élément sans succès
Bre voile mon code
HTML
While($reponce=$requette->fetch())
{
?>
<ul class="contact"><li><div class="contactus">nom+numéro de téléphone</div><ul class="submenu"><a bref="?action=wiew">détail</a></li>
<li><a bref="?action=delete">supprimé<li></ul></li></ul
<?PHP
}
?>
}

<script>
Var menu=document.getElementsByClassName('contactus");
Var submenu=getElementsByClassName("submenu");
  For(var i=0;i<menu.length;i++)
  {
    Menu[i].addEventListener("click",fonction(){
    Submenu[i].style.display="block";
  }
}

EDIT : Ajout des balises de code

A voir également:

4 réponses

jordane45 Messages postés 38213 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 juin 2024 4 678
29 mars 2019 à 15:39
Bonjour,

Pour commencer,
merci d'utiliser les balises de code pour poster ton code sur le forum
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Ensuite, c'est quoi tes attributs "bref" ?
<a bref=

Tu t'es troompé avec HREF

et enfin...
Tu as un gros souci dans l'ordre de tes balises UL LI ....
certaines ne sont pas fermées....

Commence déjà par avoir un code html propre.




0
Aime2019 Messages postés 4 Date d'inscription vendredi 29 mars 2019 Statut Membre Dernière intervention 30 mars 2019
29 mars 2019 à 15:46
Désolé il se peu que j'edite avec le téléphone c'est pas trop facile avec le correcteur d'orthogragne du téléphone qui me massacre le code
0
Aime2019 Messages postés 4 Date d'inscription vendredi 29 mars 2019 Statut Membre Dernière intervention 30 mars 2019
29 mars 2019 à 16:09
Whole($reponse=fetch())
{
?>
<ul>
<li><div class="contacts">nom+téléphone </div><ul class="submenu">
<li><a href="action=view">detail></a></li>
<li><a href="?action=delete">supprimé</a></li>
</ul>
</li>
</ul>
<?PHP
}
?>
<script>
var menu=document.getElementsByClassName("contactus");
var submenu=document.getElementsByClassName ("submenu");
For(var i=0;i<menu.length;i++)
{
Menu[i].addEventListener("click",function(){
Submenu[i].style.display="block";
}
}
</script>
Voilà le code avec le HTML en ordre s'il vous plais aidez moi a trouver ce qui ne faut faire exactement
0
jordane45 Messages postés 38213 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 juin 2024 4 678
29 mars 2019 à 16:58
Tu n'as toujours pas utilisé les BALISES DE CODE pour poster ton code !!

Quoi qu'il en soit, regarde ce que fait ceci :
<style>
 .submenu{
   display:none;
 }
</style>
<ul> 
  <li>
    <div class="contacts" data-menu_id="1">nom+téléphone </div>
    <ul class="submenu" id="submenu_1"> 
      <li>
        <a href="action=view">detail</a>
      </li> 
      <li>
        <a href="?action=delete">supprimé</a>
      </li> 
    </ul> 
  </li> 
  <li>
    <div class="contacts" data-menu_id="2">Autre menu </div>
    <ul class="submenu" id="submenu_2"> 
      <li>
        <a href="action=view">qqchose</a>
      </li> 
      <li>
        <a href="?action=delete">voilou</a>
      </li> 
    </ul> 
  </li> 
</ul>


<script>
var menus = document.getElementsByClassName("contacts");
console.log('menus',menus);
for(var i=0 ; i< menus.length ; i++){
  menus[i].addEventListener("click",function(event){
      var el = event.target || event.srcElement;
      var id_menu = el.getAttribute('data-menu_id');
      var submenu = document.getElementById('submenu_'+id_menu);
      if(submenu.style.display=="block"){
        submenu.style.display="none";
      }else{
        submenu.style.display="block";
      }
  });
}
</script>

J'ai utilisé un DATA-ATRIBUTE au niveau des MENUS
Et des ID pour les SOUS-MENUS.


0
Aime2019 Messages postés 4 Date d'inscription vendredi 29 mars 2019 Statut Membre Dernière intervention 30 mars 2019
30 mars 2019 à 11:06
Okay merci
0