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:1".I was wondering how to fix this.
HTML
<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="http://code.jquery.com/jquery-latest.js"></script>
<div class="navBar">
<div>
<h1 id="Title">SomeRandomWebsite</h1>
</div>
</div>
</body>
</html>
Javascript
$(document).ready(function(){
$(".navBar").hover(function(){
$(this).css("border","2px solid black")
})
})
CSS(if needed)
.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;
}
It is because you’re using
$
before jQuery has loaded.And move those script tags to the line before the closing
</body>
tag. i.e:add scripts in your head tag and first load jquery and then your custom style.js file and also add the defer attribute to your script. defer attribute When present, it specifies that the script is executed when the page has finished parsing. You can read more about defer