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();`