Geek Answers Handbook

JS & jQuery cannot detect html elements and say that they are undefined

I am new to JS and jQuery and I am trying to make them using subtitles. Unfortunately, I was stuck at a very early stage.

When I try to select some HTML elements through a .js file, it acts as if it cannot find the element I am asking for and nothing happens. If I try to warn the value or HTML elements, it notifies 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.

+5
source share
3 answers

Since the script tag is located above the HTML defining the elements on which it acts, it cannot find them because they do not exist since this code was run. Here is the order in which occurs on your page:

  • html and head elements are created
  • The meta element and its contents specified by the parser are created
  • Created script element for jQuery
  • The analyzer stops and waits for the jQuery file to load
  • After loading, the jQuery file is executed
  • Analysis continues
  • A script element has been created for your code.
  • The analyzer stops and waits for your file to load.
  • After loading, your script code runs - and does not find any elements, because there are no div elements yet
  • Analysis continues
  • The browser completes the parsing and creation of the page, which includes the creation of the elements that you are trying to get in the script

Ways to fix:

  • Move the script elements to the very end, immediately before the closing </body> , so all elements exist before your code runs. Preventing this from being done, this is usually the best solution.

  • Use jQuery ready function.

  • Use the defer attribute in the script element, but be careful that not all browsers support it yet.

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

+8
source

When you call the .click () method, dom does not load completely. You need to wait for everything to load in the DOM. So you need to change script.js to the following:

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

You must execute your script after the DOM Ready event. In jquery, it does this:

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

More articles:


All Articles