Discussion :

[Jessyv96]

Bonjour,

Je travaille un sur projet en JavaScript, je ne comprends pas pourquoi mon événement s'active qu'après un second clique, peut-être quelques chose ne va pas au niveau du code. J'aimerai bien comprendre pourquoi

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
let buttonMenuMobile = document.querySelector('#menu-hamburger');
let menuMobile = document.querySelector('#navbar') ;
 
buttonMenuMobile.addEventListener("click", function(){
  if (menuMobile.style.display === "none") {
      menuMobile.style.display = "block";
  } else {
      menuMobile.style.display = "none";
  }
});

[Doksuri]

le .style en js récupère le style qui est présent dans l'attribut style de ton élément.
ton élément ne doit surement pas avoir de style="display:block;" car ce doit être dans ton CSS.

donc la 1ere fois que tu cliques, menuMobile.style.display est faux puisqu'il n'existe pas.
du coup, tu passes dans ton else, et a ce moment, le JS crée l'attribut style avec l'element display:none dedans
partant de là, tu as le comportement normal

tu peux essayer avec getComputedStyle() (je ne trouve pas ca terrible comme solution)

sinon, je te conseille de passer pas une class 'show' (ou 'hide' selon tes besoins)
apres, il te suffira de faire un menuMobile.classList.toggle('show'); (ou hide selon lequel t'as choisis)

[NoSmoking]

Bonjour,

J'aimerai bien comprendre pourquoi

Comme tu as fait ta déclaration du display:none dans la déclaration CSS la « propriété javascript » n'est pas encore initialisée.

Pour t'en convaincre met un console.log(menuMobile.style.display) en entrée de ta fonction, tu verras qu'au premier click il n'y aura rien.

Pour palier à cela il est préférable de tester la largeur par exemple de ton élément qui vaut 0 quand le display est none.

Ta fonction devient des plus simple

Code :

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

1
2
3
4
5
6
7
8
9
10
buttonMenuMobile.addEventListener("click", function(){
  menuMobile.style.display = menuMobile.offsetWidth ? "none" : "block";
/*  
  if (menuMobile.style.display === "none") {
      menuMobile.style.display = "block";
  } else {
      menuMobile.style.display = "none";
  }
*/  
});