JQuery '$' getting "ReferenceError: $ is not defined" when in my .JS file

Question

My code works when I write the JS in HTML like so:

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>Address Book</title>
</head>
<body>
<input id="submitButton" type = "submit" value = "Save">
<script>
    $("#submitButton").on("click", function() {
    console.log("result!");
});
</script>
</body>

but when I split it out into it's own .js file, the JS file doesn't recognise the JQuery '$' sign. This is how it currently looks in both HTML and JS (I added the .JS source to the HTML file):

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    **<script type="text/javascript" src="addressBook.js"></script>**
    <title>Address Book</title>
</head>
<body>
<input id="submitButton" type = "submit" value = "Save">
</body>

and in the addressBook.js file:

$("#submitButton").on("click", function() {
    console.log("omg, you clicked me!");

I get the following error logged to the console when i click the button:

$("#submitButton").on("click", function() { ^ ReferenceError: $ is not defined

Any help would be appreciated!

Thanks

@LawrenceCherone well it sure looks like it comes after jQuery in the posted code. — Pointy
– Pointy, Commented Dec 1, 2019 at 15:23
Its looks that way, but I never trust user input and read between the lines. The error suggests the order and the ** in the code suggest the OP added that after (for the question) and is not the real code. — Lawrence Cherone
– Lawrence Cherone, Commented Dec 1, 2019 at 15:25
Put the addressBook script after the html at the closing body tag. That sometimes works for me. — Osvaldo Correia
– Osvaldo Correia, Commented Dec 1, 2019 at 15:25
Your posted code is incomplete, your code should be inside the </body> tag, what is with the **<script asterisks there? — Mark Schultheiss
– Mark Schultheiss, Commented Dec 1, 2019 at 15:26

bas · Accepted Answer · 2019-12-01 16:54:02Z

2

Wat selfagency said + put the script tag before the end of the body.

html file

<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>Address Book</title>
  </head>
  <body>
    <input id="submitButton" type="submit" value="Save" />
    <script type="text/javascript" src="addressBook.js"></script>
  </body>
</html>

addressbook.js

$('#submitButton').on('click', function() {
  console.log('result!');
});

The reason why the script tag in the head in this case doesn't work is because the button did not yet exist in the DOM when the addressBook script was run. Described in more detail here.

edited Dec 1, 2019 at 16:54

answered Dec 1, 2019 at 15:28

bas

15.2k7 gold badges27 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MattCouthon Over a year ago

Moving the script tag to the end of the body did it. Thanks!

bas Over a year ago

@MattCouthon I added a short explanation on the bottom and a link to read more about this problem and possible solutions.

I_Al-thamary · Accepted Answer · 2019-12-01 15:42:35Z

I don't think that you need to add the script before the end of the body. It works after I created addressBook.js and change the jquery

$('#submitButton').on('click', function() {
 console.log("omg, you clicked me!");
});

<!DOCTYPE html>
  
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
      <script type="text/javascript" src="addressBook.js"></script>
    <title>Address Book</title>
  </head>
  <body>
    <input id="submitButton" type="submit" value="Save" />

  </body>
</html>

selfagency · Accepted Answer · 2019-12-01 15:30:25Z

-1

<script>
    $("#submitButton").on("click", function() {
console.log("result!");
</script>

That is not proper syntax. It should be:

<script>
$(document).ready(function () {
  $("#submitButton").on("click", function() {
    console.log("result!");
  });
});
</script>

edited Dec 1, 2019 at 15:30

answered Dec 1, 2019 at 15:26

selfagency

1,5881 gold badge9 silver badges13 bronze badges

1 Comment

selfagency Over a year ago

What happens if you wrap it in a $(document).ready() function?

Collectives™ on Stack Overflow

JQuery '$' getting "ReferenceError: $ is not defined" when in my .JS file

3 Answers 3

2 Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Linked

Related