CODEWITHSUNDEEP
javascriptjqueryhtml
MattCouthon
MattCouthon

Reputation: 39

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

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

Upvotes: 2

Views: 572

Answers (3)

bas
bas

Reputation: 15722

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.

Upvotes: 2

I_Al-thamary
I_Al-thamary

Reputation: 3993

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>

Upvotes: 0

selfagency
selfagency

Reputation: 1578

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

Upvotes: -1

Related Questions