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

Version imprimable

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:

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'); }; }

25/08/2021, 19h11
jreaux62
- et la question est.... ?
- et le problème est.... ?

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

Code:

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:

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 !

25/08/2021, 19h37
jreaux62

Citation:

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

On ne sait toujours pas "ce qui devrait se passer" (= le résultat attendu)
25/08/2021, 19h46
ProgElecT

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.
25/08/2021, 20h06
altlofix

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

Code:

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

<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 !
25/08/2021, 20h36
ProgElecT

Citation:

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 ?
25/08/2021, 20h51
altlofix

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

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:

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');
  };
}

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 :aie:
Code:

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

26/08/2021, 09h52
altlofix

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 !

bonjour,

une solution avec classList.toggle :

Code:

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)