Tengo un archivo separado para mi barra de navegación, que cargo en el archivo principal usando el método de la primera respuesta aquí . Sin embargo, cuando intento seleccionar los elementos de la barra de navegación, aparece un error de referencia nula. ¿Como puedo resolver esto?
índice.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="../style.css"> <link rel="stylesheet" href="blog.css"> <title>My name</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap" rel="stylesheet"> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <div id="nav-placeholder"> </div> <script> $(function(){ $("#nav-placeholder").load("nav.html"); }); </script> <script src="app.js"></script> </body>aplicación.js
const navSlide = () => { const burger = document.querySelector('.burger'); const nav = document.querySelector('.nav-links'); const navLinks = document.querySelectorAll('.nav-links li'); burger.addEventListener('click',()=>{ //Toggle Nav nav.classList.toggle('nav-active') //Animate Links navLinks.forEach((link, index)=>{ if (link.style.animation){ link.style.animation = ''; // link.style.animation = `navLinkFadeOut 0.5s ease forwards ${index / 7 + 0.2}s`; } else { link.style.animation = `navLinkFadeIn 0.5s ease forwards ${index / 7 + 0.2}s`; } }) }); } const app = ()=>{ navSlide(); } app();`