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

Lawrence Lee
Lawrence Lee
4,240 Points
Posted by Lawrence Lee
Lawrence Lee
4,240 Points

Jquery Project 2 first code challenge question

Hey guys, so the code challenge wants me to set href to be the value of the href attribute of the clicked link. So here is my answer:

$("#imageGallery a").click(function(event){
  event.preventDefault();
  var href = $(this).attr(href);

and it won't work, then I re-watched the video and typed "" to the href attribute in the href variable. 

$("#imageGallery a").click(function(event){
  event.preventDefault();
  var href = $(this).attr("href");

now it works, but I am kind of confused why there is no "" in the event which is in inside of the function to the imageGallery. Maybe this is something that goes way back to javascript foundation lesson...but I want to know why did that error occur and what was the main difference between the event that is inside of the function vs the attribute name in this example.

Thanks,

4 Answers

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Lawrence,

The difference here is in what each of those functions is expecting, and in what state they're being declared.

The anonymous function that you are setting inside the click handler is a function that you are creating, and you're telling it to accept an argument, so you don't need to put any quotes (you're not passing it a value). The attr function, however, is being called, and it was set up to accept one argument in the form of a string, hence the requirement of the quotes around the value that you are passing in.

For more information, check the following links:

-attr()

-JavaScript functions

Hope this helps, and happy coding!

Erik

Mac Eisenberg
Mac Eisenberg
3,653 Points
Mac Eisenberg
Mac Eisenberg
3,653 Points

Hi Lawrence,

The word 'event' is just a variable (and can be called ANYTHING, as long as the the corresponding variables match). For example, the following code would work just fine:

$("#imageGallery a").click(function(peanuts){
  peanuts.preventDefault();
  var href = $(this).attr("href");

The .attr() method on the other hand, takes a string as an argument, much like the jQuery selector you've written on line 1. The documentation for .attr() might help: http://api.jquery.com/attr/

Lawrence Lee
Lawrence Lee
4,240 Points
Lawrence Lee
Lawrence Lee
4,240 Points

So anytime I want to create an anonymous function, I don't have to put the quotation mark inside the event handler correct? Since this is not a value, is this something that I would use to track my code to see if the event is working?

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Lawrence,

Correct, you do not put quotes around the parameters that you set in a function declaration (whether it is an anonymous function or not). Those parameters are simply placeholders to work with inside your function (variables). Think about it like this - when you declare a variable elsewhere in your code, do you wrap the variable name in quotation marks? Nope!

Erik

Lawrence Lee
Lawrence Lee
4,240 Points
Lawrence Lee
Lawrence Lee
4,240 Points

Ok, so I understand how the code works now...but I can't get my background overlay to work as the example that are shown on the video.

I am not exact sure if I can attach my workspace here, but here is the URL: http://teamtreehouse.com/workspaces/1336082

So far here are my code in my js file:

var $overlay = ('<div id="overlay"></div>');
var $image = $("<img>");

$overlay.append($image);

// Add overlay
$("body").append($overlay)
  // An image
  // A caption

// Capture the click event on a link to an image
$("#imageGallery a").click(function(event){
  event.preventDefault();
  var imageLocation = $(this).attr("href");
  // Update overlay with the image linked in the link
  $image.attr("scr", imageLocation);
  // Show the overlay.
  $overlay.show();

And my code in my stylesheet:

#overlay {
  background:rgba(0,0,0,0.7);
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  display:none;
  text-align:center;
}

The image should be showing up as a overlay after being clicked, but it is showing up in a empty page. The overlay did not show up as it are supposed to...Did I do something wrong here?

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Lawrence,

Please create a new forum post for this new issue.

Thanks!

Erik