Как правильно загрузить js-скрипт в html/djangoTemplate?

Используя шаблоны Django, я пытаюсь добавить обратный отсчет в javascript. Явное размещение сценария в HTML работает, но не при загрузке. Я думаю, что я близок, но я не могу понять, чего не хватает :/.

Вот рабочий кусок кода:

<!DOCTYPE html>

<head>
    {% load staticfiles %}
</head>

<body>
{% if remaining_time %}
    <script>
        function startTimer(duration, display) {
            var timer = duration;
            var end = setInterval(function () {
                minutes = parseInt(timer / 60, 10);
                seconds = parseInt(timer % 60, 10);

                minutes = minutes < 10 ? "0" + minutes : minutes;
                seconds = seconds < 10 ? "0" + seconds : seconds;

                display.textContent = minutes + ":" + seconds;

                if (--timer < 0) {
                    clearInterval(end);
                    document.form_submit_answer.submit()
                }
            }, 1000);
        }

        window.onload = function () {
            var allowed_time_seconds = "{{remaining_time | safe}}",
                display = document.querySelector('#time');
            startTimer(allowed_time_seconds, display);
        };
    </script>
{% endif %}

    {{ current_question.title }}
    <div>
        <form name = "form_submit_answer" action = "{% url 'assignment_completion' token current_question_num %}"
            method = "post">
            {% csrf_token %}
            {{ form }}
            <div>
                {% if next_question %}
                <input type = "submit" value = "Send your answer and go to the next question">
                {% else %}
                <input type = "submit" value = "Send your answer and end the assignment">
                {% endif %}
            </div>
        </form>
    </div>

    <div>
        TOKEN : {{ token }}
    </div>

    {% if remaining_time %}
    <div>Time remaining : <span id = "time">{{initial_remaining_time}}</span></div>
    {% endif %}
</body>

</html>

Но когда я удаляю скрипт из HTML и помещаю его в /static/js/timer.js, а затем делаю импорт в <head>, он больше не работает, initial_remaining_time отображается, но не уменьшается каждую секунду.

Вот мой кусок кода, который не работает:

<head>
    {% load staticfiles %}
    {% if remaining_time %}
    <script src = "{ % static 'js/timer.js' % }"></script>
    {% endif %}
</head>

Ожидаемый результат: отображение начального времени, затем уменьшение до 0, при 0 отправьте форму!

На практике при размещении timer.js в /static/js/timer.js отображается только начальное время, а затем ничего не происходит, как будто javascript никогда не загружался и не воспроизводился.

Выслеживать : (nkFjLIDrya1BrWd2bqYnq7TC5bpGCRGW3HcDXa6cqYI — это токен)

[18/Jul/2019 11:12:32] "GET /nkFjLIDrya1BrWd2bqYnq7TC5bpGCRGW3HcDXa6cqYI/2 HTTP/1.1" 200 1017
Not Found: /nkFjLIDrya1BrWd2bqYnq7TC5bpGCRGW3HcDXa6cqYI/{ % static 'js/timer.js' % }
[18/Jul/2019 11:12:32] "GET /nkFjLIDrya1BrWd2bqYnq7TC5bpGCRGW3HcDXa6cqYI/%7B%20%%20static%20'js/timer.js'%20%%20%7D HTTP/1.1" 404 2617

javascript python html django queryselector

18.07.2019 13:03

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

281

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

попробуйте это: <script src = "{% static 'yourAppName/path/to/app.js' %}">

Если он продолжает говорить вам, что не может найти этот конкретный файл, то вы, вероятно, неправильно настроили свой settings.py, чтобы узнать, где должен быть ваш статический каталог.

Спасибо, это работает, я забыл о: STATICFILES_DIRS = ( os.path.join(BASE_DIR, "static"), ) как ответил здесь Также мне пришлось определить глобальную переменную: ``` <script> var оставшееся_время_js = "{{ оставшееся_время | сейф}}"; </script> ``` и используйте его внутри timer.js : ``` window.onload = function () { var Allowed_Time_seconds = оставшееся_время_js, display = document.querySelector('#time'); startTimer(разрешенное_время_секунд, отображение); }; ```

— 18.07.2019 13:42

18.07.2019 13:26