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, Dec 01 '19 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, Dec 01 '19 at 15:25
Put the addressBook script after the html at the closing body tag. That sometimes works for me. — Osvaldo Correia, Dec 01 '19 at 15:25
Your posted code is incomplete, your code should be inside the `
` tag, what is with the `** — Mark Schultheiss, Dec 01 '19 at 15:26

Bas van der Linden · Accepted Answer · 2019-12-01T16:54:02.530

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 01 '19 at 16:54

answered Dec 01 '19 at 15:28

Bas van der Linden

6,504
3
13
32

Moving the script tag to the end of the body did it. Thanks! – MattCouthon Dec 01 '19 at 15:34
@MattCouthon I added a short explanation on the bottom and a link to read more about this problem and possible solutions. – Bas van der Linden Dec 01 '19 at 16:55

score 0 · Answer 2 · answered Dec 01 '19 at 15:42

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 · Answer 3 · 2019-12-01T15:30:25.680

-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 01 '19 at 15:30

answered Dec 01 '19 at 15:26

selfagency

1,119
1
6
9

What happens if you wrap it in a `$(document).ready()` function? – selfagency Dec 01 '19 at 15:29

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

3 Answers3