Javascript in template doesn't register.

I’m not super familiar with django, and I’m not having much luck getting some javascript to be recognized as existing let alone work. I have a django app called “hc”. In I have created a sunburst plot using plotly -

from django.shortcuts import render
from django.http import HttpResponse
from django.urls import reverse

import plotly.graph_objects as go
import pandas as pd

def cancer(request):
    # create a sunburst plot for navigation
    data = pd.read_csv("diseaseTreedf.csv", header=0)

    sunburst = go.Figure()
    sunburst = sunburst.to_html(full_html=False, div_id="sunburstNav")

    # collect the things I need to send to the template.
    context ={
        "sunburst": sunburst,

    return render(

this renders nicely in a template called cancer.html

{% extends "hc/base.html" %}
{% load static %}

<script src="{% static 'js/handleNav.js' %}"></script>

{% block body %}
            <td width=30%>
                {{ sunburst | safe }}
                Select a cancer type

{% endblock body %}

base.html has a header with some navigation in it at the moment - I can post that if it’s relevant.
For now though, I can’t for the life of me get the code in handleNav.js to do anything. At the moment, handleNav.js is located at hc/static/js/handleNav.js and contains:

document.getElementById('sunburstNav').addEventListener('click', function(event) {
    if ( === 'sunburstNav') {
        // Handle the click event here
        console.log('Sunburst plot clicked!');

The end goal is for it to reload the page, passing an id from the sunburst plot. For now, I’ll be happy with getting it to register that that piece of code exists by logging something to the console - currently it doesn’t, no error message, nothing.

I can’t currently find any legible instructions for how I’m meant to use javascript in a django app. I’ve tried putting the script directly in cancer.html, rather than in a separate file. I still get nothing logged to the console. Inspecting the html via a browser, I can’t find any reference to the javascript I’ve attempted to add.

Floating about the dumpster fire that is the current internet search are some references to configuration options with regards to serving static files in the site I definitely have the static files requirement in my installed apps:


and a static URL set:

STATIC_URL = 'static/'

I can’t find anything in the documentation to figure out if this is correct or not though. There is a page in the documentation that sheds zero illumination on the topic for someone not already intimately familiar with what ever it’s talking about. I think what I have is fairly close to what is discussed n the managing static files page. The other major result when searching for javascript appears to be about how to customize the admin portal.

Any thoughts/pointers on what I’m doing wrong would be much appreciated. Or there’s a way to navigate using the sunburst plot that doesn’t require javascript that I’ve completely missed …


I believe that your Javascript is running before the div is present on the document.

Maybe you need this script to run after the document was loaded?
You can add a defer attribute to the script.

Another option would be to run this code when the DOMContentLoaded event is fired.