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



    
    
    
    
    A Random Website


    
    
    
        
            SomeRandomWebsite

user_7376590 · Answer

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


// Instead of:
//...
    
    
//...
// Use this:
// ...
    
    
// ...

And move those script tags to the line before the closing tag. i.e:

// ...

user_3236948 · Answer

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




  
  
  
  A Random Website
  
  
  



  
    
      SomeRandomWebsite

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

2 Answers