How to fix an error while loading JS file into Django?

Question

I am making a university project in Django and when I load the JS for the responsive burger menu of the nav, it does not load properly I suppose. So the problem is that when I inspect it in chrome and check the loaded files, from the JS file which is:

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 = ''
        } else {
            link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s`;
        }
    });

    // burger animation
    burger.classList.toggle('toggle');
});

}

navSlide();

On the event listener, it says "cannot add a property 'addEventListener' of null". Any suggestions on how to fix that?

Where in your HTML is your JS loaded? Try loading your JS at the very end of your HTML to ensure that the entire DOM has been loaded before running your script, or add `defer` to your `script` tag — Iain Shelvington, Dec 20 '20 at 01:05

score 0 · Answer 1 · answered Dec 20 '20 at 01:03

0

It might be something silly like a spelling error. I say that because it suggests that there is no object with a class of burger.

In a querySelector the . means class. Not sure if you meant id, in which case you need to use #. Either way, I'd suggest taking a look at the HTML and checking that attributes for the object you're trying to add an event listener to.

answered Dec 20 '20 at 01:03

Salaah Amin

382
3
14

When I use this navigation outside of Django it works perfectly fine. But when I implement it in my project and try it for the responsive design, I cannot click on the burger menu. – MomchilovP Dec 20 '20 at 01:15
Would be handy to have a look at that HTML file. – Salaah Amin Dec 20 '20 at 01:30
Also, it does sound like it might be a case of when the JS in called. If the JS file is imported at the top, it is possible that it is running before the rest of the HTML has been loaded and so it doesn't find the element. Try importing your JS file right at the end. Otherwise, add the `defer` attribute to the script tag e.g: `` – Salaah Amin Dec 20 '20 at 01:32

score 0 · Answer 2 · answered Dec 20 '20 at 01:06

0

Make sure your script is being executed after the element is in the DOM. For example, the following is broken because the script comes first:

<script>
  document.querySelector('.burger').innerHTML = "foo";
</script>

<div class="burger"></div>

But by simply making sure the script is second, it works.

<div class="burger"></div>

<script>
  document.querySelector('.burger').innerHTML = "foo";
</script>

answered Dec 20 '20 at 01:06

Nick

16,066
3
16
32

The script is loaded from the static file and it is not in the html file – MomchilovP Dec 20 '20 at 01:16
Not quite sure what you mean. There is no other way to include a script than to somehow load it from the HTML file itself. – Nick Dec 20 '20 at 01:22

How to fix an error while loading JS file into Django?

2 Answers2