logo标签列表

如何正确地将JS脚本加载到HTML/Django模板中？

javascriptpythonhtmldjangoqueryselector
3
使用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
1个回答
2
尝试这个：<script src="{% static 'yourAppName/path/to/app.js' %}">如果它一直告诉你找不到那个特定的文件，则可能是您没有正确配置settings.py以知道您的静态目录应该在哪里。"
谢谢，它正在工作，我忘记了：STATICFILES_DIRS = ( os.path.join(BASE_DIR, "static"), ) 就像这里回答的一样（https://dev59.com/L10a5IYBdhLWcg3wdIbo）此外，我还必须定义一个全局变量： 并在 timer.js 中使用它：window.onload = function () { var allowed_time_seconds = remaining_time_js, display = document.querySelector('#time'); startTimer(allowed_time_seconds, display); }; - Philippe
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接