[Résolu] De jQuery slideToggle à "vanilla" JS

Bonjour

J'envisage de me passer de jQuery (afin d'avoir une requête http en moins). D'autant que pour le cas suivant je n'ai pas besoin de l'animation.

Je souhaite remplacer

function togglemenu() {
$('.rubrique').slideToggle( "slow" );
$('.pagemenu').slideToggle( "slow" );
}

par

function togglemenu() {

var x = document.getElementByClassName('rubrique');
if ( x.style.display === 'none' ) 
{ x.style.display = 'table'; }
else 
{ x.style.display = 'none'; };

var y = document.getElementByClassName('pagemenu');
if ( y.style.display === 'none' )
{ y.style.display = 'table'; }
else
{ y.style.display = 'none'; }

}

et ça ne marche pas !

C'est un menu 'hamburger' (qui apparait en dessous de 767px de large) ici : http://monplombier27.fr/
Avec jQuery il marche, avec mon code JS rien ne se déclenche au clic (onclick) ; et je ne comprend pas pourquoi.
J'ai aussi essayé en mettant un name sur les div concernées :

function togglemenu() {
var x = document.getElementByName('menu');
if ( x.style.display === 'none' ) 
{ x.style.display = 'table'; }
else 
{ x.style.display = 'none'; }
}

mais ça ne donnait rien non plus.

J'ai du raté un truc tout bête mais je ne le vois pas.

Merci d'avance pour votre aide.


PS : je viens également d'essayer avec un

querySelectorAll('.maClasse')

et ça ne marche pas non plus.
Modifié par kerlutinoec (17 May 2021 - 11:05)

Salut,

getElementByClassName ou getElementByName ou querySelectorAll renvoient un tableau donc tu ne peux pas faire un x.style directement. Il faut parcourir le tableau avec un boucle.

Si tu n'a qu'un élément a afficher / masquer je te conseille d'utiliser un id et de passer par getElementById qui lui ne renvois pas un tableau bien un élément (ID = unique) donc tu pourra directement faire x.style normalement.
Modifié par _laurent (17 May 2021 - 11:55)

_laurent a écrit :
Salut,

getElementByClassName ou getElementByName ou querySelectorAll renvoient un tableau donc tu ne peux pas faire un x.style directement. Il faut parcourir le tableau avec un boucle.

Si tu n'a qu'un élément a afficher / masquer je te conseille d'utiliser un id et de passer par getElementById qui lui ne renvois pas un tableau bien un élément (ID = unique) donc tu pourra directement faire x.style normalement.

Ca doit être ça le problème !
J'ai 4 éléments.
Je débute en javacript et la syntaxe de jQuery m'a induit en erreur du coup.
C'est quoi la syntaxe pour parcourir le tableau de résultats ?

J'ai essayé :

function togglemenu() {
var x = document.getElementByName('menu');
x.forEach(function(y) {
	if ( y.style.display === 'none' ) { y.style.display = 'table'; }
	else { y.style.display = 'none'; }
	});
}

et

function togglemenu() {
var x = document.getElementByName('menu');
for(var i= 0; i < x.length; i++) {
	if ( (x[i]).style.display === 'none' ) { (x[i]).style.display = 'table'; }
	else { (x[i]).style.display = 'none'; }
	}
}

Aucun des deux n'a fonctionné.
Modifié par kerlutinoec (17 May 2021 - 12:37)

Au fait, il faut un s à Element ou pas ?
J'ai essayé avec, ça ne marche pas non plus.
J'ai aussi essayé avec querySelectorAll sans plus de succès.
Modifié par kerlutinoec (17 May 2021 - 14:55)

Salut,
Tu peux utiliser la méthode document.getElementsByClassName() si tu veux avoir une collection d'éléments (oui il y a un "s").
La méthode document.getElementsByName() est un peu spécifique, c'est assez rare d'avoir des éléments avec un attribut "name".

Mais la méthode la plus proche de ton habitude de jQuery c'est document.querySelectorAll() car elle fonctionne exactement comme $('selecteur').

Bon j'ai beau essayer toutes sortes de combinaisons, ça ne veut pas !
Dernière en date :

function togglemenu() {
const x = document.querySelectorAll("div.rubrique, div.pagemenu");
x.forEach(function(y) {
	if ( y.style.display == 'none' ) { y.style.display = 'table'; }
	else { y.style.display = 'none'; }
	}
}

J'ai aussi essayé avec

".rubrique, .pagemenu"

".rubrique .pagemenu"

"menu"

getElementsByName('menu')

(avec var à la place de const)
ainsi que la méthode

for(var i= 0; i < x.length; i++) {
	if ( (x[i]).style.display

Rien ne marche !

Re,

kerlutinoec a écrit :
C'est quoi la syntaxe pour parcourir le tableau de résultats ?

Il suffit de lire les spec hein. Tu tape le nom de ta fonction et tu regarde comment ca s'écrit et comment ca s'applique (y'a toujours un ou plusieurs exemples).

getElementsByName pour il y a un s vu que ca renvoie plusieurs éléments (c'est comme ca qu'on reconnait d'ailleurs, si tu regarde bien, getElementById qui ne renvoi qu'un élément n'a pas de s)

getElementsByName implique que tu as des éléments avec l'attribut name (ce qui, comme le dit MatthieuR est rare :

<button name="menu"></button>

Si tu veux chopper les balises "menu" comme ça :

<menu></menu>

il faut utiliser getElementsByTagName

Par contre ici tu peux plutot utiliser getElementsByClassName comme tu avais fait au début.

forEach ne fonctione pas sur les HTMLCollection apparament.

Pour parcourir tes résultats tu peux par exemple faire :

var x = document.getElementsByClassName ('menu');
console.log(x);

for (var i=0; i < x.length; i++) {
	console.log( x[i] );
};

Sinon pour querySelectorAll et forEach ca marche bien :
https://jsfiddle.net/aLegud7w/1/

Dans le code que tu nous as donné tu as une erreur, tu ne referme pas ton forEach il manque une parenthèse :

function togglemenu() { //ouvre la fonction
const x = document.querySelectorAll("div.rubrique, div.pagemenu");
x.forEach(function(y) { //ouvre le foreach // ouvre la fonction
	if ( y.style.display == 'none' ) { y.style.display = 'table'; }
	else { y.style.display = 'none'; }
	} // ferme la fonction
// bah alors on ferme pas Patrick ?!
}// ferme la fonction

Avec un IDE adapté tu aurait vu la faute.

Bonne aprem

Effectivement le

querySelectorAll("div.rubrique, div.pagemenu")

a bien voulu marcher avec ta syntaxe. Je l'ai donc adopté car le w3c validator n'aimait pas mes balises

name=""

sur des div.
Je suis toutefois resté sur la boucle

for

standard pour une compatibilité plus large.
Merci pour ton aide.
Modifié par kerlutinoec (20 May 2021 - 14:51)