Discussion :

[altlofix]

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]

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

[altlofix]

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]

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

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

[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.

[altlofix]

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 !

[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.