javascript - JS & jQuery can't detect html elements, and says 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.

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.

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.

Share Improve this question edited Aug 26, 2024 at 22:44 Lee Taylor 7,99416 gold badges37 silver badges53 bronze badges asked Apr 18, 2015 at 11:25 Or Nevo 1831 silver badge10 bronze badges

3 put your plete script under $(document).ready(function() {}); block – Manish Kr. Shukla Commented Apr 18, 2015 at 11:27
1 You are binding event before element is available in the DOM. – A. Wolff Commented Apr 18, 2015 at 11:28
1 @Or Navo you trying to access the DOM element or variable before its initialized go here w3schools./jsref/jsref_undefined.asp and javascriptweblog.wordpress./2010/08/16/… – P.JAYASRI Commented Apr 18, 2015 at 11:34

Add a ment |

4 Answers 4

Sorted by: Reset to default 9

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.

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');
});
});

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

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

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

})

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - JS & jQuery can't detect html elements, and says they are undefined - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)