Moved nav html code to separate file, javascript not working now

Question

My navbar was fully working with the hamburger icon to animate out using the javascript file until I decided to move the nav code to a separate file so I could load it to all different html documents. Now when I try to click on the burger icon I receive the error below. The code still loads the nav bar (logo, icon, formatting) except the javascript doesn't work because it says the value of getElementById is null. Don't know how to fix it.

IMAGE OF CURRENT ERROR FOLDER WITH TEXT FILES OF ALL THE CODE

question from:https://stackoverflow.com/questions/65838759/moved-nav-html-code-to-separate-file-javascript-not-working-now

Answer 1

Your code runs before the .load() function can return anything. It runs asynchronously to stop blocking other code from running. You can feed a callback function to the load function which will be called when the load function returns. Then the DOM will be updated to know your nav elements. You can encapsulate your other code in a function and just put that function name as an argument or you can pass an anonymous function and just put all the stuff in there on the spot.

Example:

$('#nav-placeholder').load('assets/nav.html', function() {
    const ham = document.getElementById('ham');
    ham.addEventListener...
    ...
    ..
    .
 });