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

JavaScript

Posted by Ryan Hellerud
Ryan Hellerud
3,635 Points

getting jquery to work

So Im trying to get jquery working but I keep getting errors when I use :

$("document").ready(function() {
 console.log( 'ready!' );
var canvas = $("#canvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);


});

The jquery is loading because its the first script and the console log was comming out fine. It's just that the var canvas = $...line is throwing an error : Uncaught TypeError: undefined is not a function .

But when i use regular document.getElementbyid it works.

Dave McFarland
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Ryan Hellerud

To put code into a forum post use triple back ticks -- ``` — around the code. I fixed your code here, but in the future here's a forum discussion that describes how to add HTML, CSS, JavaScript or other code to the forum: https://teamtreehouse.com/forum/posting-code-to-the-forum

2 Answers

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points 
// this is returning an array of size one, unlike document.getElementById()
var canvas = $("#canvas"); 

// solution is to specify the 0 index
var canvas = $("#canvas")[0];
Ryan Hellerud
Ryan Hellerud
3,635 Points

well, you did solve the problem. How did you know it was returning an array? How did you figure this out? Also why is it returning an array??? Thank you!

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

I've run into this problem before using jQuery with canvas. After some amount of time I realized that jQuery selectors return an array of matched elements, just like CSS selectors. Canvas methods and properties expect an element, not an array. jQuery is all about doing things to all matched elements or the first element in a set of matched elements - in other words, jQuery methods and properties operate on arrays that contain elements.

Dave McFarland
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Robert Richey,

Good call on that solution. The problem isn't exactly that jQuery returns an array -- it's that it returns jQuery objects, not normal DOM elements. In other words $("#canvas") does return the HTML element with an ID of canvas, but only as a jQuery object. So only jQuery methods like .html(), .onclick(), and so on can be used with it.

All of the canvas methods work on a DOM element, so you need to convert the jQuery object to a normal DOM element. That's what this $("#canvas")[0] does. Another solution to this is:

var canvas = $("#canvas").get(0);

You can read more about jQuery's .get() method at http://api.jquery.com/get/.

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

This is most likely the case that the jQuery file isn't loading. The console won't always tell you whether the file loads or not -- depends on your settings.

Try replacing the script tag that links to jQuery with this:

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

Ryan Hellerud
Ryan Hellerud
3,635 Points

weird because i dont see your link, its not showing up.

Dave McFarland
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Ryan,

Sorry about that. Link should appear now.

Ryan Hellerud
Ryan Hellerud
3,635 Points

thanks but i tried, but it appears jquery is loading because the $("document").ready part is working because i am getting the console log message upon load. But the other part is still not working.

Dave McFarland
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Yes, you're right. Can you post your HTML too?

Ryan Hellerud
Ryan Hellerud
3,635 Points 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="new.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>

i also tried downloading the jquery files and put it in script and that was not even loading the script at all because i was getting $ undefined.