0

I have a separate file for my navbar, which I load into the main file using the method from the first answer here. However when I now try to select the elements from the navbar, I get a null reference error. How can I solve this?

index.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>

app.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();`
j08691
  • 204,283
  • 31
  • 260
  • 272
diffdaff
  • 15
  • 4
  • 2
    Could we see the code? – Scollier Nov 28 '21 at 20:37
  • 1
    Pls show the relevant code and the error – Kinglish Nov 28 '21 at 20:38
  • 2
    You probably need to use delegated event handlers as you're dynamically adding the content after the page loads: https://stackoverflow.com/q/203198/519413. That being said, using AJAX for nav includes isn't a great idea, it should really be done server side. – Rory McCrossan Nov 28 '21 at 20:40
  • @Scollier I added the code – diffdaff Nov 28 '21 at 20:51
  • Selectors and event handlers specified at page load will only match elements which exist at page load. You are adding new elements *after* page load, and your event listeners will not match them - jQuery doesn't know about those new elements. You need to delegate your handlers to an element that exists at load, and filter to match only your target elements. – Don't Panic Nov 29 '21 at 03:46
  • Does this answer your question? [How do I attach events to dynamic HTML elements with jQuery?](https://stackoverflow.com/questions/1359018/how-do-i-attach-events-to-dynamic-html-elements-with-jquery) – Don't Panic Nov 29 '21 at 03:46

0 Answers0