![](/img/trans.png)
[英]Django, code inside <script> tag doesn't work in a template
[英]JS code doesn't work when passing from a “script” tag to a separate js file in Django
我正在使用 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 %}
我要调用的文件是这个(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');
};
当我将 javascript 代码直接放入模板(在“脚本”标签内)时,它工作正常。 但是通过将代码传递给单独的 js 文件,我可以看到在加载页面时它被正确调用但代码不起作用。
我猜代码停止工作是因为 javascript 代码没有被正确调用,但我不知道如何验证这一点或如何调用我的 js 文件来加载其中的代码并执行代码。
如果您将双引号放在 static 标记之外,并在 static 标记内放置单引号,那么它可以完美运行
<script src="{% static 'repositorio/js/subfamilia_list.js' %}"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.