I have linked a jquery file but I can't use it

Question

I have linked my HTML to jquery but when I run it in Microsoft edge, it outputs

"Help.js:1 Uncaught ReferenceError: $ is not defined at Help.js:1 (anonymous) @ Help.js:

Code:

$(document).ready(function(){
    $(".navBar").hover(function(){
        $(this).css("border","2px solid black")
    })
})

navBar{
    display: flex;
    position: sticky;
    top:0;
    padding: 20px;
    border: none;
    width: 100%;
    justify-content: center;
    background-color: gainsboro;
    z-index: 2;
    
 }
 #Title{
     color: black;
     font-family: monospace;
 }

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>A Random Website</title>
</head>
<body>
    <script src="style.js"></script>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
    <div class="navBar">
        <div>
            <h1 id="Title">SomeRandomWebsite</h1>
        </div>
    </div>
</body>
</html>

Does this answer your question? [JQuery - $ is not defined](https://stackoverflow.com/questions/2194992/jquery-is-not-defined) — Cory Fail, Feb 17 '21 at 06:32
**``$ is not defined``** means that your jQuery is not loading properly. Check your network tab and see what status you are getting when jQuery is about to load. One reason can be jQuery not getting loaded over ``HTTP``, try using ``HTTPS`` — Not A Bot, Feb 17 '21 at 06:32

score 3 · Accepted Answer · answered Feb 17 '21 at 06:45

It is because you're using $ before jQuery has loaded.


// Instead of:
//...
    <script src="style.js"></script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
//...
// Use this:
// ...
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="style.js"></script>
// ...

And move those script tags to the line before the closing </body> tag. i.e:

// ...
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="style.js"></script>
    </body>
</html>

score 0 · Answer 2 · edited Feb 17 '21 at 08:22

0

Add scripts in your head tag and first load jquery and then your custom style.js file.

Also, add the defer attribute to your script.

Defer attribute when present, specifies that the script is executed when the page has finished parsing. You can read more about defer

$(document).ready(function() {
  $(".navBar").hover(function() {
    $(this).css("border", "2px solid black")
  })
})

.navBar {
  display: flex;
  position: sticky;
  top: 0;
  padding: 20px;
  border: none;
  width: 100%;
  justify-content: center;
  background-color: gainsboro;
  z-index: 2;
}

#Title {
  color: black;
  font-family: monospace;
}

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>A Random Website</title>
  <script src="https://code.jquery.com/jquery-latest.js" defer></script>
  <script src="style.js" defer></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="navBar">
    <div>
      <h1 id="Title">SomeRandomWebsite</h1>
    </div>
  </div>
</body>

</html>

edited Feb 17 '21 at 08:22

Not A Bot

2,474
2
16
33

answered Feb 17 '21 at 06:51

M Adeel Ahsan

183
1
9

If you add ``defer`` to the loading of the **jQuery** file, then the whole page load and the javascript part will also load and execute but **jQuery** is not executed, thus again resulting in **``$ is not defined``**. So please change your answer to achieve the result of the desire. You can add ``defer`` to the javascript which is using the **jQuery** so that it will only execute when the whole page is loaded including the **jQuery**. – Not A Bot Feb 17 '21 at 07:22
I tested it on local before posting my answer it works fine. – M Adeel Ahsan Feb 17 '21 at 08:23
Did you check your console? In the console, you will get an error **``$ is not defined``**. Thus on hovering (take you to mouse on the navbad div), nothing will happen. – Not A Bot Feb 17 '21 at 08:57
yes I checked the console there was no error and also on hovering the div, the border was adding. – M Adeel Ahsan Feb 17 '21 at 09:18
Then it could be that **jQuery** is already loaded in the ``cache``. – Not A Bot Feb 17 '21 at 09:20
I just checked it in incognito. It works there too. – M Adeel Ahsan Feb 17 '21 at 09:21
Okay, but here the code snippet is not working, and also in my machine. But I would advise you to use ``defer`` based on the loading and execution of the files and their uses. You can read here more about it here [async-defer script tag](https://stackoverflow.com/questions/10808109/script-tag-async-defer) – Not A Bot Feb 17 '21 at 09:25

I have linked a jquery file but I can't use it

2 Answers2