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();
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 ¿?