Il n'est pas possible dans le langage JavaScript que tu utilises d'avoir le caractère tiret dans les variables « - »
Ainsi, toutes les identifiants "menu-nav", "menu-nav2" sont invalides au sens du langage et rend l'exécution du script impossible.
Commence déjà par renommer chaque identifiant composé d'un tiret par un nom unifié comme "menuNav" ou "menu_nav" (le caractère underscore « _ » est lui autorisé)
Bonjour, tes variables "menu_nav_2" et "menu_nav_3" contiennent des éléments html , l'évènement (.onclick) attend une fonction donc ça ne fait pas sens d'y affecter des éléments html
L'opérateur de comparaison entre 2 éléments en JavaScript est « === ». Toi, tu utilises l'opérateur d'assignation de valeur « = », d'où l'erreur.
Autre chose ; vérifier que le style de "transform" est égal à "translateY(0)" ne fonctionnera jamais car pour les transformations CSS, la fonction "getComputedStyle" retourne une chaîne qui représente une matrice. (en raison du fait qu'il existe de nombreuses transformations pouvant être combinées)
Voici un exemple de retour de getComputedStyle() qui représente un "translateY(0)" :
Voici une proposition d'amélioration pour la fin du code :
// Ajout ultérieur :
// Lorsque le menu a été déroulé et l'utilisateur rafraichit
// la page, exécuter la procédure d'ouverture pour permettre à
// l'utilisateur de clôre le menu en cliquant sur l'écran
const TRANSLATE_Y_ZERO = 'matrix(1, 0, 0, 1, 0, 0)'
const TRANSLATE_Y_HUNDRED = 'matrix(1, 0, 0, 1, 0, 100)'
if (input.checked) {
changerEtatMenu();
let menu_nav = document.getElementById('menu_nav');
let menu_nav2 = document.getElementById('menu_nav2');
let menu_nav3 = document.getElementById('menu_nav3');
if (getComputedStyle(menu_nav3).transform === TRANSLATE_Y_ZERO) {
menu_nav.style.transform = TRANSLATE_Y_HUNDRED;
menu_nav2.style.transform = TRANSLATE_Y_HUNDRED;
}
// menu_nav3.onclick = menu_nav; ❌ Ligne inutile puisqu'en dessous, tu mets "… = menu_nav2"
menu_nav3.onclick = menu_nav2;
}
Konjiki Ashisogi Jizo