1

Estoy intentando que querySelectorAll() seleccione todos los enlaces de mi navbar, para posteriormente detectar el id del enlace en el que hace click el usuario y lanzar un evento (en este caso, mostrar una sección de la web).

El caso es que me detecta todos los enlaces (ids link1, link2, link3), pero no el primero (link0). Al pulsar en el link0 me devuelve este error:

logic.js:23 Uncaught TypeError: Cannot read property 'style' of null
    at HTMLAnchorElement.<anonymous> (logic.js:23)

Entiendo que al pulsar el link0, me está devolviendo null, pero no entiendo por qué.

He probado a renombrar los ids, pero creo que no se debe a ello, son únicos. ¿Alguién podría echarme una mano?

HTML:

<nav id="navbar" class="navbar navbar-expand-lg fixed-top">
    <a id="link0" class="navbar-brand" href="#top">
        <img src="img/logo.png" height="25" width="25" alt="logo">
    </a>
    <button class="navbar-toggler navbar-toggler-right" 
        type="button" data-toggle="collapse" 
        data-target="#navbarResponsive" 
        aria-controls="navbarResponsive" 
        aria-expanded="false" aria-label="Toggle navigation">
        <i class="fas fa-bars"></i>
    </button>
    <div id="navbarResponsive" class="collapse navbar-collapse">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a id="link1" class="nav-link" href="#about">About</a>
          </li>
          <li class="nav-item">
            <a id="link2" class="nav-link" href="#works">Works</a>
          </li>
          <li class="nav-item">
            <a id="link3" class="nav-link" href="#contact">Contact</a>
          </li>
        </ul>
    </div>
</nav>

JavaScript:

// UI controller
var id;

var uiController = (function() {
    var links = Array.from(document.querySelectorAll('nav a'));
    

    return{
        showSection: function(){
            for (let i = 0; i < links.length; i++) {
                links[i].addEventListener("click", function(e) {
                    id = e.target.id;
                    console.log(id);
                    document.getElementById(id).style.display = "visible";
                });
            }
        }
    }
})();

// Global controller
var controller = (function(uiController) {
    return {
        init: function(){
            console.log('App has started');
            uiController.showSection();
        }
    };
})(uiController);

controller.init();
1
  • Me parece que Array.from sobra en tu código. Basta con esto: var links =document.querySelectorAll('nav a'); y luego asignas el listener dentro del for. Tampoco entiendo mucho por qué tienes la asignación del listener dentro de un return ¿?
    – A. Cedano
    Commented el 28 sept. 2020 a las 10:37

1 respuesta 1

2

Esto ocurre porque el primer <a></a> contiene un hijo que es la imagen. Y cuando se hace el click se hace sobre la imagen y por lo tanto el e.target es el elemento img y este no tiene id. Por eso te falla.

Puedes usar el método elem.closest(selector) para buscar el primer ancestro que encuentre con dicho selector.

 for (let i = 0; i < links.length; i++) {
   links[i].addEventListener("click", function(e) {
     id = e.target.closest('a').id;
     console.log(id);
     document.getElementById(id).style.display = "visible";
   });
 }

closest

1
  • Genial!!!! Muchas gracias!! Commented el 28 sept. 2020 a las 10:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.