Estoy tratando de actualizar un valor booleano al hacer clic sin suerte.
const myDropdownMenu = document.getElementById("dropdownMenu"); const openNav = document.getElementById("openNav"); const closeNav = document.getElementById("closeNav"); let mobileMenu = false; function toggleMenu() { mobileMenu = !mobileMenu; } if (mobileMenu) { myDropdownMenu.style.display = "flex"; closeNav.style.display = "flex"; openNav.style.display = "none"; } else { myDropdownMenu.style.display = "none"; openNav.style.display = "flex"; closeNav.style.display = "none"; } <div> <a href="index.html"> <h1>CAVVD</h1> </a> <div id="mobileNav" class="mobileNavigation"> <button id="openNav" onclick="toggleMenu();"> Open </button> <button id="closeNav" onclick="toggleMenu();"> Close </button> <div id="dropdownMenu"> <a href="index.html#sobreNosotros">Sobre Nosotros</a> <a href="index.html#reuniones">Reuniones</a> <a href="ForodeConsultas.html">Foro de Consultas</a> <a href="index.html#HaceteVoluntario">Hacete Voluntario</a> <a href="Fotos.html">Fotos</a> <a href="index.html#contacto">Contacto</a> <a class="Dona" a href="index.html#Dona!"> Doná!</a> </div> </div> </div> Todo funciona excepto let mobileMenu , que no se actualiza con la función toggleMenu() . Pero si devuelvo un simple console.log o alert , funciona.
Alguien puede ayudarme? Gracias
Su variable mobileMenu está funcionando, la funcionalidad que no funciona es que los cambios en la interfaz de usuario dependen de la variable mobileMenu . Modifica tu código a esto:
const myDropdownMenu = document.getElementById("dropdownMenu"); const openNav = document.getElementById("openNav"); const closeNav = document.getElementById("closeNav"); let mobileMenu = false; function toggleMenu() { mobileMenu = !mobileMenu; if (mobileMenu) { myDropdownMenu.style.display = "flex"; closeNav.style.display = "flex"; openNav.style.display = "none"; } else { myDropdownMenu.style.display = "none"; openNav.style.display = "flex"; closeNav.style.display = "none"; } } /* if (mobileMenu) { myDropdownMenu.style.display = "flex"; closeNav.style.display = "flex"; openNav.style.display = "none"; } else { myDropdownMenu.style.display = "none"; openNav.style.display = "flex"; closeNav.style.display = "none"; } */El if/else debería estar dentro de la función, así:
function toggleMenu() { mobileMenu = !mobileMenu; if (mobileMenu) { myDropdownMenu.style.display = "flex"; closeNav.style.display = "flex"; openNav.style.display = "none"; } else { myDropdownMenu.style.display = "none"; openNav.style.display = "flex"; closeNav.style.display = "none"; } }Esto se debe a que, de lo contrario, if/else solo se ejecuta una vez (al cargar), mientras que queremos que se ejecute cada vez que se activa la función.
Su if/else está en el lugar equivocado, por lo que no se ejecuta cuando se ejecuta la función. Para que if/else se ejecute cuando se ejecuta la función, debe estar entre llaves de la función toggleMenu (dentro de la función).
El siguiente código solucionó su problema moviendo la instrucción if/else al lugar correcto (a la función) para que se ejecute cuando se llame a la función.
const myDropdownMenu = document.getElementById("dropdownMenu"); const openNav = document.getElementById("openNav"); const closeNav = document.getElementById("closeNav"); let mobileMenu = false; function toggleMenu() { mobileMenu = !mobileMenu; if (mobileMenu) { myDropdownMenu.style.display = "flex"; closeNav.style.display = "flex"; openNav.style.display = "none"; } else { myDropdownMenu.style.display = "none"; openNav.style.display = "flex"; closeNav.style.display = "none"; } } <div> <a href="index.html"> <h1>CAVVD</h1> </a> <div id="mobileNav" class="mobileNavigation"> <button id="openNav" onclick="toggleMenu();"> Open </button> <button id="closeNav" onclick="toggleMenu();"> Close </button> <div id="dropdownMenu"> <a href="index.html#sobreNosotros">Sobre Nosotros</a> <a href="index.html#reuniones">Reuniones</a> <a href="ForodeConsultas.html">Foro de Consultas</a> <a href="index.html#HaceteVoluntario">Hacete Voluntario</a> <a href="Fotos.html">Fotos</a> <a href="index.html#contacto">Contacto</a> <a class="Dona" a href="index.html#Dona!"> Doná!</a> </div> </div> </div>