11521 sujets

JavaScript, DOM et API Web HTML5

[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)
Modérateur
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)
kerlutinoec a écrit :
Au fait, il faut un s à Element ou pas ?

Bonsoir. il ne faut pas coder en aveugle comme ça, normalement vous pouvez mettre des plugins d'assistance sur votre IDE préféré pour l'autocomplétion (si ce n'est pas déjà intégré de base) et pour la doc il existe un excellent site : MDN. Lorsque vous cherchez une fonctionnalité javascript (ou CSS) sous Google, vous ajoutez "MDN" pour une explication de qualité.

Exemple pour votre fonctionnalité : document.getElementsByName()
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 !
Bon j'ai fini par trouver la seule chose qui veut bien marcher :
function togglemenu() {
var x = document.getElementsByName('menu');
for (var i= 0; i<x.length; i++) {
	if ( x[i].style.display === 'table' ) { x[i].style.display = 'none'; }
	else { x[i].style.display = 'table'; }
	}
}

Mes différents essais avec 
querySelectorAll
n'ont rien donné.
L'usage de 
forEach(function(y)
ne fonctionne pas.
Meilleure solution
Modérateur
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)
Sujet clos
Aller à