I am trying to use a js file in my html file but got stuck. The html file links to my js file but the js still wont work.
my code (in the snippet it seems to be working but in my file it wont):
document.body.innerHTML = "<h1>Today's date is </h1>"<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width">
<!-- jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<!-- logo -->
<link href="/static/logo2.ico" rel="icon">
<!-- css file -->
<link href="/static/styles.css" rel="stylesheet">
<!-- hammer.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<!-- touchswipe.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js"></script>
<!-- js file -->
<script type = "text/javascript" src="../../static/js/reserve.js"></script>
<title>Reservify</title>
</head>
<body>
</body>Your javascript is executed before the DOM document is loaded. Run JavaScript after loading the DOM document.
Like this:
window.addEventListener('DOMContentLoaded', function(){
document.body.innerHTML = "<h1>Today's date is </h1>";
});
Or like this:
window.onload = function() {
document.body.innerHTML = "<h1>Today's date is </h1>";
}
The best practice is to implement your scripts at the end of the body tag.
The browser will load the visible page first and it is a better user experience.
<head>
<title>Reservify</title>
</head>
<body>
<!-- js file -->
<script type = "text/javascript" src="../../static/js/reserve.js"></script>
</body>
You have to put the js call on the body, this because the DOM load first this element when is loading the page this make the load of the page faster
<script type = "text/javascript" src="../../static/js/reserve.js"></script>
So you have to put the above line on the end of the body, and your code will be like this:
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width">
<!-- jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<!-- logo -->
<link href="/static/logo2.ico" rel="icon">
<!-- css file -->
<link href="/static/styles.css" rel="stylesheet">
<!-- YOU HAVE TO DELETED THE JS CALLS HERE -->
<title>Reservify</title>
</head>
<body>
<!-- Here is your code -->
<!-- In the end of the body you put your js calls -->
<!-- hammer.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<!-- touchswipe.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js"></script>
<!-- js file -->
<script type = "text/javascript" src="../../static/js/reserve.js"></script>
</body>
I hope I've helped you (;