Couldn't apply javascript to my template in flask despite having it in the static dir. How do I resolve that in the code below? [duplicate]

问题

I have a flask project in which I'm trying to make a tree structure but I don't think the JS is being applied to my tree.html as it couldn't expand the options. Below is the code that I found in internet which I'm trying to make work as I don't have any frontend experience. I'd be grateful for your help.

Base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <script type="text/javascript" src="/static/jsfun.js"></script>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>

tree.html

{% extends "base.html" %}

{% block content %}
    <ul class="tree">
        <li><a href="#">Part 1</a>
            <ul>
                <li><a href="#">Item A</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item B</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item C</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item D</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item E</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>

        <li><a href="#">Part 2</a>
            <ul>
                <li><a href="#">Item A</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item B</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item C</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item D</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item E</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>

        <li><a href="#">Part 3</a>
            <ul>
                <li><a href="#">Item A</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item B</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item C</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item D</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item E</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
{% endblock %}

jsfun.js

var tree = document.querySelectorAll('ul.tree a:not(:last-child)');
for(var i = 0; i < tree.length; i++){
    tree[i].addEventListener('click', function(e) {
        var parent = e.target.parentElement;
        var classList = parent.classList;
        if(classList.contains("open")) {
            classList.remove('open');
            var opensubs = parent.querySelectorAll(':scope .open');
            for(var i = 0; i < opensubs.length; i++){
                opensubs[i].classList.remove('open');
            }
        } else {
            classList.add('open');
        }
    });
}

Here's when the page opens

And nothing happens when I click any item:

回答1:

Please check this repo. Check where you are making a mistake. I believe its the way you are importing the js file. you should use like below

<script src="{{ url_for('static', filename='js/jsfun.js') }}"></script>

来源：https://stackoverflow.com/questions/43016555/couldnt-apply-javascript-to-my-template-in-flask-despite-having-it-in-the-stati

标签

javascript

html

Flask

frontend