Как правильно загрузить 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

python django javascript html queryselector
person Philippe    schedule 18.07.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

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

person Keimeno    schedule 18.07.2019
comment
Спасибо, это работает, я забыл о: 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(разрешенное_время_секунд, отображение); }; ``` - person Philippe; 18.07.2019