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

jquery ui
jquery library
jquery examples
jquery cdn
jquery download
jquery tutorial
jquery ajax
jquery cdn google

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

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.

jQuery API Documentation, What is jQuery? jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to� Overview. jQuery, at its core, is a Document Object Model (DOM) manipulation library. The DOM is a tree-structure representation of all the elements of a Web page. jQuery simplifies the syntax for finding, selecting, and manipulating these DOM elements.

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>

jQuery Tutorial, jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly� jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

<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>

jQuery Introduction, To build jQuery, you need to have the latest Node.js/npm and git 1.7 or later. Earlier versions might work, but are not supported. For Windows, you have to� jQuery UI 1.11.4 - uncompressed, minified Themes: black-tie blitzer cupertino dark-hive dot-luv eggplant excite-bike flick hot-sneaks humanity le-frog mint-choc overcast pepper-grinder redmond smoothness south-street start sunny swanky-purse trontastic ui-darkness ui-lightness vader

jQuery UI, A Touch-Optimized Web Framework. jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible� deferred: Exclude jQuery.Deferred. This also removes jQuery.Callbacks. Note that modules that depend on jQuery.Deferred(AJAX, effects, core/ready) will not be removed and will still expect jQuery.Deferred to be there. Include your own jQuery.Deferred implementation or exclude those modules as well (grunt custom:-deferred,-ajax,-effects,-core

jQuery, Examples of how to do common event, element, ajax and utility operations with plain javascript. The jQuery XMLHttpRequest (jqXHR) object returned by $.ajax() as of jQuery 1.5 is a superset of the browser's native XMLHttpRequest object. For example, it contains responseText and responseXML properties, as well as a getResponseHeader() method.

jquery/jquery: jQuery JavaScript Library, For instance, to load jQuery, embed the <script src="https://ajax.googleapis.com/ ajax/libs/jquery/3.5.1/jquery.min.js"></script> snippet in your web page.

Comments
  • move the <script ..addressBook.js below the jquery one
  • @LawrenceCherone well it sure looks like it comes after jQuery in the posted code.
  • 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.
  • Put the addressBook script after the html at the closing body tag. That sometimes works for me.
  • Your posted code is incomplete, your code should be inside the </body> tag, what is with the **<script asterisks there?
  • Moving the script tag to the end of the body did it. Thanks!
  • @MattCouthon I added a short explanation on the bottom and a link to read more about this problem and possible solutions.
  • What happens if you wrap it in a $(document).ready() function?