<p>I'm pretty new to JS and <code>jQuery</code>, and i'm trying to make a subtitles player using them. Unfortunately, i'm stuck in a very early stage.</p> <p>When I'm trying to select some <code>HTML</code> 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 <code>undefined</code>.</p> <p>So this is the code:</p> <p><strong>HTML</strong></p> <pre class="prettyprint"><code> <!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> </code></pre> <p><strong>script.js</strong></p> <pre class="prettyprint"><code>$("div").click(function () { console.log('loaded'); }); </code></pre> <p>Thanks.</p>

<p>Because your <code>script</code> tag is <em>above</em> 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:</p> <ol> <li>The <code>html</code> and <code>head</code> elements are created</li> <li>The <code>meta</code> element is created and its content noted by the parser</li> <li>The <code>script</code> element for jQuery is created</li> <li>The parser <strong>stops</strong> and waits for the jQuery file to load</li> <li>Once loaded, the jQuery file is executed</li> <li>Parsing continues</li> <li>The <code>script</code> element for your code is created</li> <li>The parser <strong>stops</strong> and waits for your file to load</li> <li>Once loaded, your script code is run — and doesn't find any elements, because there are no <code>div</code> elements yet</li> <li>Parsing continues</li> <li>The browser finishes parsing and building the page, which includes creating the elements you're trying to access in your script</li> </ol> <p>Ways to correct it:</p> <ol> <li><p>Move the <code>script</code> elements to the very end, just before the closing <code></body></code> 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.</p></li> <li><p>Use jQuery's <code>ready</code> feature.</p></li> <li><p>Use the <code>defer</code> attribute on the script element, but beware that not all browsers support it yet.</p></li> </ol> <p>But again, if you control where the script elements go, #1 is usually your best bet.</p>

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

Tags:

javascript

jquery

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.

708

asked Apr 18 '15 11:04

Or Nevo

1 Answers

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.

177

answered Sep 19 '22 00:09

T.J. Crowder

Related questions
                            
                                FormData boundary missing from content-type in POST request header
                            
                                Possible to catch JavaScript errors within an Angular app from $window.onerror
                            
                                Moving a sprite along a pre-defined path in Phaser.IO
                            
                                How can I do a Ctrl+Click on protractor?
                            
                                AngularJS filter in React Component
                            
                                JS currentTime for html video tag is not working on chrome
                            
                                Solution to jshint "Better written in dot notation" when i have valid use of non-dot notation
                            
                                How to check the availability of a resource using JavaScript?
                            
                                Change context in $.each()
                            
                                Can't pass arguments to chrome.declarativeContent.SetIcon
                            
                                Javascript: Sending arrayBuffer using XMLHttpRequest
                            
                                How do I check if a video exists on YouTube, in client side
                            
                                How to access a static function from a component instance in react?
                            
                                D3 - Correct number of elements on update, but wrong values
                            
                                Unicode characters not rendering properly in HTML5 canvas
                            
                                toastr is not defined [closed]
                            
                                finding d3 extent of multiple values in object array
                            
                                React: this.state disappears in for loop
                            
                                React Native: ListView not displaying all rows
                            
                                How to compare contents of javascript array, but not the order of them? [duplicate]

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!

Donate Us With