CODEWITHSUNDEEP
javascriptjqueryhtml
Alex Wohlbruck
Alex Wohlbruck

Reputation: 1436

External JS files won't recognize elements in html

This is probably the weirdest thing I've encountered while programming in JavaScript, and I can't find a solution anywhere online.

So all I've done is created an html document and a JS file that is externally linked to it. When I try to reference an element from the page in the JS file, it doesn't do anything, and there aren't any errors in the console. Here's an example:

$('#box').click(function() {
	alert('test');
})
<html>
<head>
<script src="script.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!--jQuery-->
</head>
<body>

<div id="box" style="width: 200px; height: 100px; background: #000;">
</div>

</body>
</html>

It works wonderfully in the fiddle, but on my machine it doesn't. Also tried hosting on Google Drive, nothing. I opened it on another computer, nada. Here's the live page:

https://7568fa8ec856c21498701e0edd220440c5c75264.googledrive.com/host/0B4rWYiw5-JZtfm1wNE1iMkY1b0tuaXFnaUZmaWFsSU5XLXQtaTh5U2ozVFB0NHgyVXpOOW8/test.html

I don't understand!?!?

Upvotes: 1

Views: 3665

Answers (3)

jfriend00
jfriend00

Reputation: 707328

You have two separate issues:

  1. First you must load jQuery before your script so that it is available when your script runs. So, switch the order of your two script tags to fix that issue.

  2. Your script cannot run until the DOM is loaded. When you run it in the <head> tag, it is running BEFORE the DOM has loaded and thus the page is empty at that point so your code can't find the proper elements to install click handlers. There are a couple ways to solve this issue. The simplest is to move all your script tags to right before </body>. This will ensure that the DOM is available when the scripts run and you won't have to do anything else special.

Here's a revision of your HTML that should work:

<html>
<head>
</head>
<body>

<div id="box" style="width: 200px; height: 100px; background: #000;">
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>

You could also just switch the order of your two scripts and leave them in the <head> tag and then change your script to this:

$(document).ready(function() {
    $('#box').click(function() {
        alert('test');
    })
});

In jQuery, the $(document).ready(fn) construct instructs jQuery to call a specific function only when the DOM has finished loading. This allows you to place this initialization script anywhere and jQuery will make sure that your callback function is not called until the DOM is ready.

Upvotes: 1

MaxZoom
MaxZoom

Reputation: 7753

How does it behave if you define HTML like below:

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!--jQuery-->
  </head>
  <body>
    <div id="box" style="width: 200px; height: 100px; background: #000;">
     </div>
  </body>
  <script src="script.js" type="text/javascript"></script>
</html>

It is actually recommended to include custom JavaScript after document body. In addition to fixing your issue, the HTML will be displayed on the page before JavaScript execution will finished.

Upvotes: 2

John Green
John Green

Reputation: 13435

If scripts.js is using jquery, you need to load the jquery before you load scripts.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!--jQuery-->
<script src="script.js" type="text/javascript"></script>

Upvotes: 1

Related Questions