My app can't find my javascript file, error 404, is there something off in my script tag?-CodePudding

I am getting this error in my terminal when running my flask

 127.0.0.1 - - [21/Sep/2022 09:44:45] "GET / HTTP/1.1" 200 -
 127.0.0.1 - - [21/Sep/2022 09:44:45] "GET /app.js HTTP/1.1" 404 -

but my link to my script leads me to the correct file when I cmd click it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" media="all" href="../static/style.css">
    <script type="text/javascript" src="../app.js"></script>
    <title>Questionnaire</title>
</head>

I am not sure if the problem exist here or here in my app.py

@app.route('/test', methods=['POST', 'GET'])
def test():
    output = request.get_json()
    print(f'output: {output}, output type: {type(output)}') # This is the output that was stored in the JSON within the browser
    response = app.response_class(
        response=json.dumps(output),
        status=200,
        mimetype='application/json'
    )
    return response

This is my app.js file

//for display purposes only 
    console.warn('added' , {persons} );
    let pre = document.querySelector('#msg pre');
    pre.textContent = '\n'   JSON.stringify(persons, '\t', 2);
    const people = JSON.stringify(persons);
    $.ajax({
        url: '/test',
        type: "POST",
        type: "GET",
        contentType: "application/json",
        data: JSON.stringify(people)
    });

    //saving to localStorage
    //localStorage.setItem('SurveyResults', JSON.stringify(names) );
}

for better understanding my file setup is as follows

> static
   > Images
> templates
    index.html
app.js
app.py

CodePudding user response：

This is reemphasizing the reply from @Jordanm. After looking into his answer. I believe the problem was that flask expects to see my js file in my static folder. Since it was not contained there, it popped a 404 regardless of whether my script path led me to the file in vscode. I believe there is a way to go around this through declaring the paths in the constructor, but I am not 100% sure.

CodePudding user response：

Put your tag in the tag and it should be at the bottom of html file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" media="all" href="../static/style.css">
    
    <title>Questionnaire</title>
</head>
<body>

<script type="text/javascript" src="../app.js"></script>
<!-- your script tag is supposed to be here at the bottom-->
</body>
</html>