Gérer ajout attribut aria et ajout d'une class pour menu hamburger

**altlofix** · 25/08/2021, 18h42

Bonjour à tous,

Je fatigue, je me casse les dents depuis... sur ce pauvre bout de code. Pas faute d'avoir conduit des recherches ici et ailleurs. Je ne dois pas être loin de la vérité pourtant... Cela doit être gros comme une maison, mais, quand ça veut pas, ça veut pas. question de logique toute bête sûrement.
Si quelqu'un peut jeter un coup d’œil rapide à ce code sans le(me) juger trop rapidement et me renvoyer à l'apprentissage des bases.

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
var mesid = ["menutogglesk0","menutogglesk1","menutogglesk2","menutogglesk3","menutogglesk4"];
 
for(var i=0; i<mesid.length; i++)
{
  var sa = document.getElementById(mesid[i]);
 
   sa.onclick = function () {
 
  if (-1 !== sa.className.indexOf('opened')) {
    sa.className = sa.className.replace(' opened', '');
    sa.setAttribute('aria-expanded', 'false');
  } else {
    sa.className += ' opened';
    sa.setAttribute('aria-expanded', 'true');
  };
}

**jreaux62** · 25/08/2021, 19h11

et la question est.... ?
et le problème est.... ?

**altlofix** · 25/08/2021, 19h22

Mon code ne marche pas !
J'ai une page html avec le code suivant:

Code html :

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
	<button class="menu-toggle-sx" id="menutogglesk0" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-play" viewBox="0 0 24 24">
  <path d="M10.804 8 5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z"/>
</svg>
</button>
	<p>---------------------------------------------------------</p>
	<button class="menu-toggle-sb" id="menutogglesk1" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-play" viewBox="0 0 24 24">
  <path d="M10.804 8 5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z"/>
</svg>
</button>
		<p>---------------------------------------------------------</p>
	<button class="menu-toggle-sb" id="menutogglesk2" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-play" viewBox="0 0 24 24">
  <path d="M10.804 8 5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z"/>
</svg>
</button>
	<p>---------------------------------------------------------</p>
	<button class="menu-toggle-sb" id="menutogglesk3" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-play" viewBox="0 0 24 24">
  <path d="M10.804 8 5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z"/>
</svg>
</button>
	<p>---------------------------------------------------------</p>
	<button class="menu-toggle-sb" id="menutogglesk4" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-play" viewBox="0 0 24 24">
  <path d="M10.804 8 5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z"/>
</svg>
</button>

Quand je clique sur l'un des boutons, rien ne se passe quand je regarde la sortie dans l'inspecteur de code de Firefox.

J'arrive à faire fonctionner la chose pour un bouton unique avec ce code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
var sa = document.getElementById('menutogglesk0');
sa.onclick = function () {
 
  if (-1 !== sa.className.indexOf('opened')) {
    sa.className = sa.className.replace(' opened', '');
    sa.setAttribute('aria-expanded', 'false');
  } else {
    sa.className += ' opened';
    sa.setAttribute('aria-expanded', 'true');
  }
};

Voilà, désolé si je ne me suis pas montré suffisamment explicite !

**jreaux62** · 25/08/2021, 19h37

Mon code ne marche pas !
...
rien ne se passe...

On ne sait toujours pas "ce qui devrait se passer" (= le résultat attendu)

**ProgElecT** · 25/08/2021, 19h46

Salut

SI tu veux appliquer à l'ensemble de tes bouton, peut être utiliser le sélecteur getElementsByClassName qui te retourne un tableau de tout les éléments qui ont pour classe "menu-toggle-sb"
Si non il y a aussi le sélecteur getElementsByTagName dans ton cas "button", dans ton cas il te retourne un tableau de tout tes boutons.

**altlofix** · 25/08/2021, 20h06

Quand je clique une fois sur le bouton portant l'identifiant "menutogglesk0" j'obtiens le code suivant dans l'inspecteur de code.

Code :

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

<button class="menu-toggle-sx opened" id="menutogglesk0" aria-expanded="true">

Si je clique à nouveau sur le même bouton j'obtiens le code

Code :

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

<button class="menu-toggle-sx" id="menutogglesk0" aria-expanded="false">

Voilà, je voudrais obtenir le même comportement pour tous les boutons de ma page sans passer par getElementsByClassName qui ne fonctionne pas avec les vieux navigateurs.
Là, pour le coup, je ne peux pas être plus explicite. Merci encore pour vos réponses !

**ProgElecT** · 25/08/2021, 20h36

Envoyé par altlofix

...
Voilà, je voudrais obtenir le même comportement pour tous les boutons de ma page sans passer par getElementsByClassName qui ne fonctionne pas avec les vieux navigateurs.
Là, pour le coup, je ne peux pas être plus explicite. Merci encore pour vos réponses !

Tout dépent de se que tu entends par avec les vieux navigateurs
Donc La méthode Element.getElementsByTagName() retourne une liste des éléments portant le nom de balise ne fonctionnerait pas non plus ?

**altlofix** · 25/08/2021, 20h51

Merci pour getElementsByTagName qui fonctionnerait sans doute mais je préférerais rester sur getElementById() et surtout comprendre ce qui cloche dans mon code.

**altlofix** · 25/08/2021, 21h16

Pour être plus précis encore le code suivant fonctionne mais, à l'évidence il est mal pensé et peut être "factorisé" pour économiser quelques lignes. Je ne sais pas comment m'y prendre.

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
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
var sa = document.getElementById('menutogglesk0');
var sb = document.getElementById('menutogglesk1');
var sc = document.getElementById('menutogglesk2');
var sd = document.getElementById('menutogglesk3');
var se = document.getElementById('menutogglesk4');
 
   sa.onclick = function () {
 
  if (-1 !== sa.className.indexOf('opened')) {
    sa.className = sa.className.replace(' opened', '');
    sa.setAttribute('aria-expanded', 'false');
  } else {
    sa.className += ' opened';
    sa.setAttribute('aria-expanded', 'true');
  };
}
 
   sb.onclick = function () {
 
  if (-1 !== sb.className.indexOf('opened')) {
    sb.className = sb.className.replace(' opened', '');
    sb.setAttribute('aria-expanded', 'false');
  } else {
    sb.className += ' opened';
    sb.setAttribute('aria-expanded', 'true');
  };
}
 
     sc.onclick = function () {
 
  if (-1 !== sc.className.indexOf('opened')) {
    sc.className = sc.className.replace(' opened', '');
    sc.setAttribute('aria-expanded', 'false');
  } else {
    sc.className += ' opened';
    sc.setAttribute('aria-expanded', 'true');
  };
}
 
	   sd.onclick = function () {
 
  if (-1 !== sd.className.indexOf('opened')) {
    sd.className = sd.className.replace(' opened', '');
    sd.setAttribute('aria-expanded', 'false');
  } else {
    sd.className += ' opened';
    sd.setAttribute('aria-expanded', 'true');
  };
}
 
	   	   se.onclick = function () {
 
  if (-1 !== se.className.indexOf('opened')) {
    se.className = se.className.replace(' opened', '');
    se.setAttribute('aria-expanded', 'false');
  } else {
    se.className += ' opened';
    se.setAttribute('aria-expanded', 'true');
  };
}

**darkstar123456** · 26/08/2021, 08h09

Bonjour,

Effectivement, à partir du moment où vous écrivez plusieurs fois exactement la même chose, c'est que c'est mal pensé.
Et rester avec getElementById() n'est clairement pas la bonne solution car vu qu'un est ID est sensé être unique sur une page, c'est clairement pas fait pour réaliser ça.

Voici un exemple avec getElementByClassName(), d'autant qu'elle est quand même largement supportée : https://caniuse.com/getelementsbyclassname
Seuls IE6-8 et Firefox 2 ne le supportent pas

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var toggler_btn = document.getElementsByClassName('menu-toggle-sx');
 
for(var i = 0; i < toggler_btn.length; i++) {
  toggler_btn[i].onclick = function() {
    if (-1 !== this.className.indexOf('opened')) {
       this.className = this.className.replace(' opened', '');
       this.setAttribute('aria-expanded', 'false');
    } else {
      this.className += ' opened';
      this.setAttribute('aria-expanded', 'true');
    }
  }; 
}

Codepen du code en action : https://codepen.io/DarkStar123456/pen/bGRNPWy

**altlofix** · 26/08/2021, 09h52

Merci beaucoup pour la réponse et le Codepen! Cela va me permettre d'avancer.
C'est vrai qu'IE8 est une vieillerie...
Je sais qu'un ID doit être unique sur une page, c'est d'ailleurs pour ça que j'utilisais des ID différents. Votre solution est plus carrée et plus ingénieuse.
Je comprends votre code, mais je ne risquais pas de réussir à l'élaborer, pour le coup ce n'est pas faute de m'être donné du mal. Merci encore !

**jreaux62** · 26/08/2021, 12h49

bonjour,

une solution avec classList.toggle :

Code js :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var toggler_btn = document.getElementsByClassName('menu-toggle-sx');
for(var i = 0; i < toggler_btn.length; i++) 
{
  toggler_btn[i].onclick = function() {
    this.classList.toggle('opened');
    if(this.getAttribute('aria-expanded')=='false')
    {
      this.setAttribute('aria-expanded',true);
    } else {
      this.setAttribute('aria-expanded',false);
    }
  }; 
}

(mais il faut vraiment oublier IE, de toute façon remplacé par Edge)

Gérer ajout attribut aria et ajout d'une class pour menu hamburger

JavaScript

Discussions similaires

Partager

Partager