Javascript JS代码没有'；当从a"；脚本“；标记到Django中的单独js文件

我正在使用css和javascript文件来改进页面的显示，但是我在执行javascript代码时遇到了问题

我的申请文件结构如下：

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

我使用的模板是（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 %}

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');
    };

{%extends“base.html”%}
{%load static%}
{%block title%}Cactaceae{%endblock%}
{%block content%}
仙人掌科
{%if对象\列表%}
{对象_列表%中的对象为%j}
{%endfor%}
过滤器
客车
{%else%}
不提供任何信息

{%endif%}
{%endblock%}

我要调用的文件是这个（subfamilia_list.js）：

{% 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 %}

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');
    };

var homeIcon=document.querySelector（'.col-md-4'）；
window.onresize=函数（）{
如果（window.innerWidth<720）homeIcon.classList.add（'my-3'）；
else homeIcon.classList.remove（'my-4'）；
};

当我将javascript代码直接放入模板中（在“script”标记中）时，效果很好。 但是通过将代码传递到一个单独的js文件，我可以看到在加载页面时正确调用了它，但代码不起作用

---

我猜代码停止工作是因为javascript代码没有被正确调用，但我不知道如何验证这一点，也不知道如何调用我的js文件来加载其中的代码并执行代码。

如果将双引号放在静态标记外，将单引号放在静态标记内，那么它就可以完美地工作

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

---

如果将双引号放在静态标记的外面，将单引号放在静态标记的里面，那么它可以完美地工作

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