Flask - 加載外部 JavaScript 文件時出現引用錯誤

Question

我在使用 flask 時遇到問題。 我在 vsCode 終端和網站（本地）中重新運行 flask 我按下“確定”按鈕（在下面指定），它返回

ReferenceError cat is not defined at HTMLButtonElement.onclick

底座.html

<htmL land="en">
    <head>

        <title>Pub-Quiz</title>
            <!--Required Meta Tags-->
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">

            <!-- Bootstrap, Jquery, AJAX, CSS and JS-->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

            <script type="text/javascript" src="{{ url_for('static', filename='category.js') }}"></script>
    </head>
    <body>
            <!--Nav Start-->
            <nav class="navbar navbar-expand-md bg-info navbar-dark">
                <a class="navbar-brand" href="#">Quiz</a>

                <!--Collapse Button Start-->
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <!--Collapse Button End-->

                <!--Nav Links Start-->
                <div class="collapse navbar-collapse" id="collapsibleNavbar">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('index')}}"><i class="fas fa-home"></i> Home</a>
                        </li>
                        {% if current_user.is_anonymous %}
                        <li class="nav-item">
                            <a class="nav-link" href=" {{ url_for('login') }}"> <i class="fas fa-user-plus"></i> Login</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href=" {{ url_for('register') }}"><i class="fas fa-sign-in-alt"></i> Register</a>
                        </li>
                        {% else %}
                        <li class="nav-item">
                            <a class="nav-link" href=#Quiz><i class="fas fa-clipboard"></i> Quizzes</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href= "{{ url_for('signout')}}"><i class="fas fa-sign-out-alt"></i> Sign Out</a>
                        </li>
                        {% endif %}
                    </ul>
                </div> 
                <!--Nav Links End-->
            </nav>
            <!--Nav End-->
        {% block content %} {% endblock %}

        <footer class = "page-footer bg-info">
            <div class ="footer-copyright text-center text-white py-3">@ 2020 Copyright: (something)</div>
        </footer>
    </body>
</htmL>

類別.html

{% extends 'base.html' %}
{% block content %}
<h1 class = "text-center">Choose Your Category</h1>
<div class = "jumbotron">
    <div class = "row justify-content-center">
        <div class = "col-lg-6">
            <form action= "" method="post" novalidate>
                    {{ form.hidden_tag()}}
                <p>
                    {{ form.categories() }}
                </p>
                <div class = "row justify-content-center">
                    <div class ="col-lg-3 mt-lg-4">
                        <button type="submit" name = "submit" class="btn btn-primary mx-auto">Start Quiz</button>
                    </div>   
                </div> 
            </form>
            <button type="button" onclick="cat()">OK</button>
        </div>
    </div>
</div>
{% endblock %}

類別.js

function cat()
{
    let opt = document.getElementById("categories").value;
    alert(opt);
}

我試圖將腳本從頭部移到正文中，甚至移到 category.html 文件中，但沒有成功。 static 文件在正確的目錄下： app -> static -> category.js為什么會這樣？ 對我來說，這似乎都是理論上的。

提前致謝！

Answer 1

更新您的Category.html ，如下所示：

...
...
{% endblock %}
<script type="text/javascript" src="{{ url_for('static', filename='cat.js') }}"></script>

或者..

...
...
{% endblock %}
<script type="text/javascript">
function cat()
{
    let opt = document.getElementById("categories").value;
    alert(opt);
}
</script>

並將其從base.html中刪除。

此外，當您刷新頁面以查看更改時，請嘗試刪除緩存/硬重新加載，或者您可以嘗試在隱身模式下。

Flask - 加載外部 JavaScript 文件時出現引用錯誤

問題描述

1 個解決方案

解決方案1
0 2020-05-20 12:46:53

Flask - 加載外部 JavaScript 文件時出現引用錯誤

問題描述

1 個解決方案

解決方案1 0 2020-05-20 12:46:53

解決方案1
0 2020-05-20 12:46:53