Getting to run jQuery - $ is not defined Error
Question
Hello I'm new to Javascript, i'm trying to get to run jQuery library but Chrome notifies this error to me. I did search a few posts about this in Stack Overflow and on Google but even so to me at least i couldn't find a satisfactory answer (i checked to have put jQuery script as first). Here is my HTML source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Design</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/slick-theme.css">
<!--<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/slick.min.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<a href="" class="logo">
<img src="" alt="">
</a>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Work</a></li>
<li><a href="">Services</a></li>
<li><a href="">Clients</a></li>
<li><a href="">Our Team</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</div>
</div>
</header>
<section class="slider">
<ul class="slider-carousel" id="#slider-carousel">
<li class="img1">
<h2>BEAUTIFIED BUSINESS <span>TEMPLATE</span></h2>
<p>We believe in creativity always</p>
<i class="fab fa-apple"></i>
<i class="fab fa-android"></i>
<i class="fab fa-windows"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio modi ducimus aut nihil explicabo, quia voluptatibus. Sint consequatur culpa vel sapiente, et dicta ratione facere distinctio, maiores modi eligendi. Perspiciatis.</p>
<a href="" class="btn btn-half">Get Started</a>
<a href="" class="btn btn-full">Buy Now</a>
</li>
<li>
<h2>Slider</h2>
</li>
<li>
<h2>Slider</h2>
</li>
</ul>
</section>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
This is my directory structure:
**Project
|
+-- index.html
|
+-- js
| |
| -- bootstrap.min.js
| -- jquery-3.4.1.min.js
| -- main.js
| -- slick.min.js
|
+-- css
| |
| -- all.css
| -- bootstrap.min.css
| -- slick.css
| -- slick-theme.css
| -- style.css
|
+-- images
| |
-- slider1.jpg
This is the single line of code i run:
$(Document).ready(function(){})
ERRORS I GET IN BRACKETS:
ESLint (2)
ERROR: '$' is not defined. [no-undef] $(Document).ready(function(){})
ERROR: 'Document' is not defined. [no-undef] $(Document).ready(function(){}) JSLint (7)
'$' was used before it was defined. $(Document).ready(function(){})
'Document' was used before it was defined. $(Document).ready(function(){})
Expected exactly one space between 'function' and '('. $(Document).ready(function(){})
Expected exactly one space between ')' and '{'. $(Document).ready(function(){})
Missing space between ')' and '{'. $(Document).ready(function(){})
Missing 'use strict' statement. $(Document).ready(function(){})
Expected ';' and instead saw '(end)'. $(Document).ready(function(){})
(I tried to load both, the local jQuery script and the other, but none of them seemed to work though) {Thank you for your attention}
1 answers
solution1
2 2020-04-29 16:37:20
You must have a.eslintrc.json file.
Make sure you have the following lines of code in it:
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"jquery": true
},
"plugins": [
"dollar-sign",
"jquery"
],
"rules": {
"dollar-sign/dollar-sign": [
2,
"ignoreProperties"
]
}
You can read more here: https://eslint.org/docs/user-guide/configuring#configuration-file-formats
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.