I'm working on project2 of CS50's web programming using python and javascript. I've made a .htm file and I need to write some javascript code for the 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>

This is my dummy JavaScript code.

document.addEventListener('DOMContentLoaded', () => {
    document.querySelector('#condition').onmouseover = () => {
        document.querySelector('#condition').innerHTML = "only letters allowed, no whitespaces";
    document.querySelector('#condition').onmouseout = () => {
        document.querySelector('#condition').innerHTML = "";

How can I link my external .js file so that those functionalities will get applied?

You must log in to answer this question.

Browse other questions tagged .