JavaScript functionalities not applied when linking an external .js file in flask app
Question
I'm working on a flask application. I've made a .htm file and I need to write some javascript code for the web page. I first wrote the code in an external file but while running my flask app, the javascript functionalities were not applied. But when I included all the js code in the .htm file itself (within the script tag), then they were being applied. These are the Bootstrap CSS and JavaScript CDNs that I have linked. I'm thinking these are overriding the code written in the external .js file.
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
This is how I'm linking my external .js file.
<script src="{{url_for('static',filename='index.js')}}"></script>
How can I link my external .js file so that those functionalities will get applied?
This is my folder structure:
This is how I have included the Bootstrap js CDNs and my .js file:
1 answers
solution1
0 2020-10-05 05:06:59
Sometimes the JavaScript might not load due to the encoding.
Set the encoding to UTF-8 and it will work.
Here is the code:
<head>
<!-- set encoding to utf-8 -->
<meta charset="utf-8">
<!-- Adding your CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Adding your viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- all other code of your file -->
<!-- Add JavaScript in the end of the contents in body -->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>
EDIT:
According to the picture you have given, use this code:
<script type="text/javascript" src="../static/index.js"></script>
You have to write it as ../static/index.js in your script src
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.