JS code doesn't work when passing from a “script” tag to a separate js file in Django

Question

I am working with css and javascript files to improve the presentation of my page but I have problems executing my javascript code.

The file structure of my application is as follows:

prj_dj_uno/
├── db.sqlite3
├── manage.py
├── media
├── prj_dj_uno
│   ├── settings.py
│   ├── urls.py
├── repositorio
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   ├── models.py
│   ├── static
│   │   └── repositorio
│   │       ├── css
│   │       │   ├── base.css
│   │       └── js
│   │           └── subfamilia_list.js
│   ├── templates
│   │   ├── base.html
│   │   └── repositorio
│   │       └── subfamilia_list.html
│   ├── tests.py
│   ├── urls.py
│   └── views.py
└── static
    ├── admin
    │   ├── fonts
    │   ├── img
    └── repositorio
        ├── css
        │   ├── base.css
        │   └── subfamilia_list.css
        ├── img
        │   ├── img_ref_350x300.svg
        │   ├── java_logo.png
        │   └── logo_python.png
        └── js
            └── subfamilia_list.js

the template i am using is this (subfamilia_list.html) :

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

{% block title %}<title>Cactaceae</title>{% endblock %}

{% block content %}

    <div class="container">    
        <h2 class="text-center my-3">Cactaceae</h2>

        {% if object_list %}

            <div class="row">

                <div class="list-group col-md-8">

                    {% for obj in object_list%}

                        <a href="{{ obj.get_absolute_url }}" class="list-group-item list-group-item-action"> {{ obj.subfamilia }}</a>

                    {% endfor %}

                </div>

                <div class="col-md-4" id="buscador">

                    <div class="card border-dark mb-3" style="max-width: 18rem;">

                        <div class="card-header">FILTRAR</div>

                        <div class="card-body">
                            <form method="GET" action="/repositorio/busqueda/">
                                <input type="text" class="form-control" placeholder="Indique genero" id="genero" name="genero" value="{{ request.GET.genero }}">

                                <button type="submit" class="btn btn-secondary mb-2 my-3">Buscar</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
    
        {% else %}

            <p> No se encontro información </p>
    
        {% endif %}

    </div> <!--container-->

    <script src={% static "repositorio/js/subfamilia_list.js" %}></script>

{% endblock %}

the file i want to call is this (subfamilia_list.js) :

var homeIcon = document.querySelector('.col-md-4');

window.onresize = function() {
    if (window.innerWidth < 720) homeIcon.classList.add('my-3');
    else homeIcon.classList.remove('my-4');
    };

When I put the javascript code directly into the template (inside a "script" tag) it works fine. But by passing the code to a separate js file, I can see that it is called correctly when loading the page but the code doesn't work.

I guess the code stops working because the javascript code is not being called correctly, but I do not know how to validate this or how to call my js file to load the code inside it and the code is executed.

Answer 1

if you put doublue quotes out side static tag and single quotes inside the static tag then it works perfectly

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