Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Jan Reefs
11,161 Pointsdocument undefined?
My 'script.js' file looks like this.
$(document).ready(function() {
console.log('hello')
$('.newContact').on('click', function(event) { event.preventDefault(); console.log('You clicked me'); }) })
I get this error:
script.js:1 Uncaught ReferenceError: $ is not defined at script.js:1
Anyone that can tell me what is wrong?
4 Answers
KRIS NIKOLAISEN
54,971 PointsDo you reference jQuery in your html before script.js? For example:
<script src="jquery-3.4.1.min.js"></script>
<script src="script.js"></script>
Jan Reefs
11,161 PointsBelow my HTML file.
I have never seen that jquery reference? I don't think that's it....
<!doctype html> <html lang="en">
<head>
<title>Codeworks</title>
<link rel="stylesheet" href="layout.css">
</head>
<body>
<header>
<h1>Start of coding assignment</h1>
</header>
<main>
<div class="introduction">
<h2> What is the assignment? </h2>
<div class="introtext">Build a simple address book application using HTML, CSS, JavaScript and jQuery. It is a single page, that opens in the browser, where the user can create new contacts delete contacts, and use a search bar to find existing contacts. Each contact should have a name, surname, phone number, and address.<br>
</div>
</div>
<div class="introduction">
<h2> Create a new contact </h2>
<div class="introtext">Please fill in the name, surname, phone number and address in each grid below.<br> </div>
</div>
<div>
<form action='' method='get'>
<label for="First name"> Name: </label>
<input type="text" name="firstName" id="firstName"> <br>
<label for="Surname"> Surname: </label>
<input type="text" name="surname" id="surname"> <br>
<label for="Phone Number"> Phone Number: </label>
<input type="text" name="phoneNumber" id="phoneNumber"> <br>
<label for="Address"> Address: </label>
<input type="text" name="address" id="address"> <br>
<button class='newContact' type="submit">Create new contact now!</button>
</div>
<div class="introduction">
<h2> Deleting a contact </h2>
<div class="introtext">Please fill in the name and surname of the person you would like to remove.<br>
</div>
</div>
<div>
<form action='' method='get'>
<label for="First name"> Name: </label>
<input type="text" name="firstName" id="firstName"> <br>
<label for="Surname"> Surname: </label>
<input type="text" name="surname" id="surname"> <br>
<button class='deleteContact' type="submit">Remove contact now!</button>
<div class="introduction">
<h2> Searching a contact </h2>
<div class="introtext">Please fill in the name and surname of the person you would like to search.<br>
</div>
</div>
<div>
<form action='' method='get'>
<label for="Search"> Name: </label>
<input type="text" name="firstName" id="firstName"> <br>
<label for="Surname"> Surname: </label>
<input type="text" name="surname" id="surname"> <br>
<button class='searchContact' type="submit">Search contact now!</button>
<script src='script.js'> </script>
</main>
</body>
<footer>
<h1>End of Coding assignment</h1>
</footer>
</html>
KRIS NIKOLAISEN
54,971 PointsIn order to use jQuery you need to reference the library in your html. One means of doing this is to download the file here: right click 'minified' under jQuery 3.x and choose 'Save Link As...'. and include that file in your project. You reference it like you would any other js script file but it should come first.
Jan Reefs
11,161 PointsGreat it works!!! Rockstar!