JS & jQuery can't detect html elements, and say's they are undefined

Question

JS & jQuery can't detect html elements, and say's they are undefined

I'm pretty new to JS and jQuery, and i'm trying to make a subtitles player using them. Unfortunately, i'm stuck in a very early stage.

When I'm trying to select some HTML elements through a .js file, it acts like it can't locate the element I'm asking for, and nothing happens. If I try to alert the value or the HTML of the elements, it alerts undefined.

So this is the code:

HTML

  <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="jquery-2.1.3.min.js"></script>
        <script src="script.js"></script>
        <style type="text/css">
            body{
                margin: 0px;
                padding: 0px;           
            }           
            #wrapper{
                width: 150px;
                text-align: center;
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#75bdd1), color-stop(14%,#75bdd1), color-stop(100%,#2294b3));
                padding: 10px 2px;
            }
            h3{
                font-family: Arial, Helvetica, sans-serif;
            }
            img{
                width: 50px;
                margin: 0 auto;     
            }
            input{
            display: none;          
            }
        </style>


    </head>
    <body>
        <div id="wrapper">
            <h3>Select subtitles file</h3>
                <img src="browse.png" alt="browse">
        </div>
        <input type="file" accept=".srt" id="file">
    </body>
</html>

script.js

$("div").click(function () {
    console.log('loaded');
});

Thanks.

4 Answers

When you call the .click() method the dom is not fully loaded. You have to wait till everything in DOM is loaded.So you have to change your script.js to this:

$(document).ready(function(){
$("div").click(function () {
    console.log('loaded');
});
});

0 Created by cssGEEK on 2020-03-11 20:58:04 +0000 UTC

Share

You should execute your script after DOM Ready event. In jquery it makes so:

$(function(){
    $("div").click(function () {
            console.log('loaded');
    })
});

0 Created by Mihail on 2020-03-11 20:58:04 +0000 UTC

Share

$(document).on('click', "element" , function (ev) {
    console.log('loaded');
})

})

0 Created by Jonas on 2020-03-11 20:58:04 +0000 UTC

Share

T.J. Crowder · Accepted Answer · 2020-03-11 20:58:04 +0000 UTC

Because your script tag is above the HTML defining the elements that it acts on, it can't find them because they don't exist as of when that code runs. Here's the order in which things are happening in your page:

The html and head elements are created
The meta element is created and its content noted by the parser
The script element for jQuery is created
The parser stops and waits for the jQuery file to load
Once loaded, the jQuery file is executed
Parsing continues
The script element for your code is created
The parser stops and waits for your file to load
Once loaded, your script code is run — and doesn't find any elements, because there are no div elements yet
Parsing continues
The browser finishes parsing and building the page, which includes creating the elements you're trying to access in your script

Ways to correct it:

Move the script elements to the very end, just before the closing </body> tag, so all of the elements exist before your code runs. Barring a good reason not to do this, this is usually the best solution.
Use jQuery's ready feature.
Use the defer attribute on the script element, but beware that not all browsers support it yet.

But again, if you control where the script elements go, #1 is usually your best bet.