HTML links to js file but it still won't work-CodePudding

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/[email protected]/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/[email protected]/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>

CodePudding user response：

You are probably running javascript before loading the DOM document. Execute your 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>";
}

CodePudding user response：

Your example working fine in Stackoverflow code snippet. It probably this links automatically but in your local, you should bring your javascript folder to bottom.

Notice that, I added your script to body.

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/[email protected]/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/[email protected]/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>


        <title>Reservify</title>

    </head>
    <body>
    
    
    
            <!-- js file -->
        <script type = "text/javascript" src="../../static/js/reserve.js"></script> 
    </body>

CodePudding user response：

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/[email protected]/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/[email protected]/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 (;

CodePudding user response：

Best Practice

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.

Code Example

<head>
    <title>Reservify</title>

</head>
<body>
    <!-- js file -->
    <script type = "text/javascript" src="../../static/js/reserve.js"></script> 
</body>

Also read

Why script tags should be placed at the end of body tag