elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Curso de javascript por TickTack


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Ayuda con javascript
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Ayuda con javascript  (Leído 3,092 veces)
FGM24

Desconectado Desconectado

Mensajes: 33



Ver Perfil
Ayuda con javascript
« en: 15 Noviembre 2021, 21:12 pm »

Estoy haciendo una pagina web, donde el diseño para celular, tiene una barra de navegacion.
Quiero que dicha barra de navegacion se cierre al momento de hacer click en cualquier parte de la pantalla que no sea el contenedor de dicha barra, ya intente varias cosas y nada sale, el problema es que intento hacer un "if" para que solo funcione el click y remueva la clase para hacer desaparecer la barra cuando contenga la clase "show-menu"(esa es la clase que se añade para que se muestre el menu) pero no entra el if  y no se porque 





Código:
const navToggle = document.querySelector('.nav_toggle'),
nav = document.querySelector('.nav_list')


/* Validate if constant exists */

if(navToggle){
    navToggle.addEventListener('click', () =>{
        nav.classList.add('show-menu')
        navToggle.classList.add('show-menu')
    })
} else if(navToggle.classList.contains('.show-menu')){
    document.addEventListener('click' , () =>{
        nav.classList.remove('show-menu')
        navToggle.classList.remove('show-menu1')
    })
}




el primer if si entra, el que valida si existe la constante "navToggle" (que es el icono para hacer aparecer la barra) el problema es que el segundo if no entra, ya intente con else, con otro if, con else if, y nada funciona, alguna recomendacion de como hacer que funcione?



En línea

@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.399


Turn off the red ligth


Ver Perfil WWW
Re: Ayuda con javascript
« Respuesta #1 en: 16 Noviembre 2021, 05:19 am »

No es buena idea añadir listeners cuando se cumpla una condición. En código donde en distintos momentos se cumpla una u otra, si no eliminas el listemer anterior y simplemente añades uno nuevo, se te van a acumular el listener antiguo y el nuevo.

Una de las principales diferncias entre nav.addEventListener("click" callback), y nav.onclick, es que uno añade eventos y el otro settea un evento. Es decir, de la segunda forma se eliminan todos los eventos que exisitían antes. Dependiendo del código puedes optar por el onclick o en su defecto por removeEventListener (por ejemplo cuando tienes 3 eventos, y solo quieres eliminar uno y no todos)

Tu condición está mal, dices:
Si (nav) {
  Haz
} en caso contrario (nav.propiedad.otra propiedad) {

}

Si no existe toggle, te vas a tu else if, en el cual intentas acceder a una propiedad de toggle que 100% no existe. Aún por encima accedes a las propiedades sin saber si exite toggle sin usar el interrogante.
Cuando no está claro si un elemento es inexistente, tira error al acceder a sus propiedades. En todo caso seria else if(nav?.propiedad?.otraPropiedad)

También es posible que quieras capurar el click en toda la página, ya que lo que pretendes es hacer desaparecer el nav cuando se haga click fuera del nav. Para ello tienes que añadir el listener a window.

Otro problema que veo es con los hijos de nav. Si tienes hijos en el nav que están por encima del nav, al hacerle click al hijo, no te salta el evento del nav (porque le haces click al hijo y no al nav directamente. Tienes que propagar el evento de hijo a padre. Es una opción de addEventListener. Si miras en la documentación de MDN de addEventListener, te explican en detalle como hacerlo y como funciona.

Te dejo un ejemplo de como lo haría yo. Adáptalo para tu uso, que entiendo que quieres añadirlo a clases por si tienes varios navs y demás. O corrige los errores que te comenté.

Código
  1. const html = document.querySelector("html");
  2. const body = document.querySelector("body");
  3. const nav = document.createElement("nav");
  4. const otroNav = document.createElement("nav");
  5. const enlace = document.createElement("a");
  6. const otroEnlace = document.createElement("a");
  7.  
  8. html.style.backgroundColor = "gray";
  9.  
  10. enlace.innerText = "Mi enlace (hijo de nav)";
  11. enlace.style.display = "block";
  12. enlace.style.border = "3px solid black";
  13. enlace.style.width = "40%";
  14. enlace.style.height = "3em";
  15.  
  16. otroEnlace.innerText = "Mi otro enlace (también hijo del nav que quiero trackear)";
  17. otroEnlace.style.border = "3px solid black";
  18. otroEnlace.style.position = "fixed";
  19. otroEnlace.style.bottom = "80px";
  20. otroEnlace.style.left = "6px";
  21. otroEnlace.style.fontSize = "1.3em";
  22.  
  23. nav.style.height = "200px";
  24. nav.style.width = "90%";
  25. nav.style.backgroundColor = "red";
  26. nav.innerText = "Esto es un ejemplo";
  27. nav.id = "navQueQuieroTrackear";
  28.  
  29. otroNav.style.height = "200px";
  30. otroNav.style.width = "90%";
  31. otroNav.style.backgroundColor = "orange";
  32. otroNav.innerText = "Otro nav";
  33.  
  34. body.style.width = "100%";
  35. body.style.height = "900px";
  36. body.backgroundColor = "green";
  37.  
  38. nav.appendChild(enlace);
  39. nav.appendChild(otroEnlace);
  40. body.appendChild(nav);
  41. body.appendChild(otroNav);                                                              
  42.  
  43. window.addEventListener("click", evt => {
  44.  const tagName = evt.target.outerHTML.substr(1, 15).split(" ")[0]; // obtener etiqueta clickada.
  45.  alert("Clickeaste el elemento " + tagName);
  46.  
  47.  const nav = document.querySelector("#navQueQuieroTrackear");
  48.  const id = evt.target.id; // obten id del elemento clickado
  49.  if (id === nav.id) { // se clickeo el nav que busco
  50.    alert("Nav clickeado"); // xD
  51.    nav.style.opacity = "1"; // 0 es invisible, 1 es visible.
  52.  } else {
  53.    // comprueba si el elemento clickado es hijo del nav
  54.    let isChildOfNav = false; // auxiliar
  55.    const navChilds = document.querySelectorAll("#navQueQuieroTrackear > *"); // selecciona todos los hijos del nav
  56.    evt.target.currentLoopedElementTemporalId = true; // propiedad que uso de auxiliar para detectar si alguno de los hijos la tiene (A.K.A, es el mismo elemento)
  57.    for (let i in navChilds) { // recorre los hijos
  58.      if (navChilds[i]?.currentLoopedElementTemporalId) { // comprueba si el hijo actual tiene la propiedad
  59.        // el elemento iterado es el mismo que el clickeado (es decir, el elemento clickeado es hijo del nav
  60.        isChildOfNav = true;
  61.        evt.target.currentLoopedElementTemporalId = null; // elimina la propiedad auxiliar
  62.        break; // ya sabemos que es hijo, deja de iterar
  63.      }
  64.    }
  65.  
  66.    if (isChildOfNav) { // si se clickeo un hijo de nav
  67.      alert("Es un hijo de nav");
  68.      nav.style.opacity = "1";
  69.    } else { // si no es hijo de nav
  70.      alert("No es hijo de nav");
  71.      nav.style.opacity = "0.2"; // haz el nav casi invisible
  72.    }
  73.  }
  74.  
  75.  
  76. });


En línea

Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖

FGM24

Desconectado Desconectado

Mensajes: 33



Ver Perfil
Re: Ayuda con javascript
« Respuesta #2 en: 24 Noviembre 2021, 21:25 pm »

No es buena idea añadir listeners cuando se cumpla una condición. En código donde en distintos momentos se cumpla una u otra, si no eliminas el listemer anterior y simplemente añades uno nuevo, se te van a acumular el listener antiguo y el nuevo....

Te agradezco mucho la aportacion, leere la
documentacion de add event listener que me comentas,
voy a intentar implementarlo de la manera que me comentas, te agradezco muchisimo  :D
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
ayuda con javascript
Desarrollo Web
Software Download 2 2,492 Último mensaje 30 Noviembre 2012, 18:28 pm
por Software Download
Ayuda con javascript en mi web(no tengo ni idea de javascript)
Desarrollo Web
jonathanmr 1 3,436 Último mensaje 1 Febrero 2013, 06:14 am
por Shell Root
Ayuda con javascript
Desarrollo Web
Kami 3 1,827 Último mensaje 19 Diciembre 2013, 19:24 pm
por Kami
[AYUDA][javascript] Soy muy nuevo en JS y necesito ayuda con este codogo
Desarrollo Web
Noxware 2 2,785 Último mensaje 30 Septiembre 2014, 10:20 am
por trig0
[javascript][DUDA] ¿Algún ejemplo sencillo de clases en javascript?
Desarrollo Web
.:Xx4NG3LxX:. 6 5,982 Último mensaje 18 Septiembre 2020, 23:41 pm
por .:Xx4NG3LxX:.
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines