Javascript file incorrect? Django

Using Django
1

I am writing a Django website. I am trying to use a JavaScript file to move a mobile nav bar into the page when clicking on the burger icon.

I have successfully loaded a JavaScript file from the static folder. (I checked with the alert function.)

However, once I write more code in the JavaScript file, the JavaScript file doesn’t work and I don’t get the alert “Hello, javascript file loaded” upon refreshing the website page. Is my javascript incorrect? Is the format incorrect for use in Django?

Any help would be much appreciated, thanks for reading.

App.js

alert("Hello, javascript file loaded");  


const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');

    burger.addEventListener('click', () = > {
        nav.classList.toggle('nav-active');
    }); 
}

navSlide();

Base.html

{% load static %}
<html>
    <head>
        <title>Pep Genie</title>
        <link rel="stylesheet" type="text/css" href="{% static 'genie/style.css' %}">
    </head>

    <body>

        {% block content %}{% endblock %}

        <script src="{% static 'genie/app.js' type="text/javascript" %}"></script>
    </body>
</html>

Index.html

{% extends 'genie/base.html' %}
{% block content %}

<nav>
    <div class="logo">
        <h4>The Logo</h4>
    </div>
    <ul class="nav-links">
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">About</a>
        </li>
        <li>
            <a href="#">Work</a>
        </li>
        <li>
            <a href="#">Our Projects</a>
        </li>
    </ul>
    <div class="burger">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
    </div>

</nav>

Style.css

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
 }

nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: navy;
    color: lightgray;
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 20px;
}

nav .logo {
    margin: 0 100px 0 0;
}

.nav-links {
    display: flex;
    justify-content: space-around;
    width: 40%;  
}

nav li {
    list-style: none;
}

nav a {
    text-decoration: none;
    color: lightgray;
    letter-spacing: 3px;
    font-weight: bold;
    font-size: 14px;
}

.burger {
    display: none;
}

.burger div {

    width: 25px;
    height: 2px;
    margin: 4px;
    background-color: lightgray;
}

@media screen and (max-width: 1000px) {
    .nav-links {
        width: 50%;
    }
}

@media screen and (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
    .nav-links {
        position: absolute;
        right: 0;
        top: 8vh;
        height: 92vh;
        background-color: navy;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }

    .burger {
        display: block;
        cursor: pointer;
    }
}

.nav-active {
    transform: translateX(0%);
}
2

Your JavaScript snippet is working for me. I’d check the browser’s developer tools console to see if there’s some other JavaScript error being thrown that might be affecting this.

3

Hi.

Apparently the error comes from these expression > =

- burger.addEventListener('click', () = > {
+ burger.addEventListener('click', () => {

If there’s another error with your JS it should appear in the dev tools console after page load.

2 Likes
4

That’s a fantastic catch. I didn’t notice the space in the operator that he posted, and didn’t have that in my sample.

5

Didn’t see it either but simply occurred to me to paste the code in jsfiddle because I didn’t remember if the syntax was correct :sweat_smile:

6

Thanks MarcoRichetta!