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 jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 1

Posted by Luca Di Pinto
Luca Di Pinto
8,051 Points

Question about attr method and browser's behaviour

Hi guys, I didn't understand very well this step.

Can you explain me better what the attr method does? Which is the purpose of this step? And why do we use a href var if we have already an attribute name with the same name? Is it possible to do this?

Another question regarding the browser's behaviour.. When Andrew makes a console log, he speaks about something that flash up very quickly and to stop the link from following it... What is he speaking about? And he says we need to stop the browser's default behaviour.. Why do we need to do that? It's not clear these 2 steps!

Thanks everybody for help!

Ryan Zimmerman
Ryan Zimmerman
3,854 Points
Ryan Zimmerman
Ryan Zimmerman
3,854 Points

So to the second part of your question. What he is talking about is event handling. When you click on something on a page it will attempt to reload the page because it wants to reload the DOM to deal with the change in behavior. So many times we use a way of stoping the event from doing what it is defaulted to do. We use .preventDefault() to do this.

Building WebApps is all about manipulating the DOM through events. The apps will not work if every time we click on something the whole thing resets.

2 Answers

Steven Parker
Steven Parker
229,771 Points
Steven Parker
Steven Parker
229,771 Points

Ryan seems to have answered part 2.

So, about the .attr method - it's used to get the value of an element attribute. In this case, it gets the value of the href attribute. You can look in the HTML and see how all the a elements have href attributes.

Then, this value is saved in a variable named "href". The href variable in JavaScript is a completely different thing from the href attribute of an HTML element. As mentioned in the video, this variable could have any name, but the name href was chosen as a good way to remember what it is being used to hold. "A sensible name", the instructor says.

Justin Goldby
seal-mask
.a{fill-rule:evenodd;}techdegree
Justin Goldby
Full Stack JavaScript Techdegree Student 12,754 Points
Justin Goldby
.a{fill-rule:evenodd;}techdegree
Justin Goldby
Full Stack JavaScript Techdegree Student 12,754 Points

To add to Steven's answer, we cannot just select "#imageGallery li" as that is just the list item element not the link itself. The link takes you to a dead end of just the image because it is linking you to that image on the server, as opposed to a link to "google.com" for an example with an image as the visual of the link.

He wants to stop the browser from taking you to the hosted image once the link is pressed by stopping the default action the browser takes. The link actually takes you to the image that is hosted, while visually on the gallery page the image is the actual link. He uses attr to store the href attribute which is the link itself into the variable href. That way when he prints it to the console he can make sure we are selecting the right element to manipulate.

We also cannot select "href" when stopping the default actions the browser takes, it is an attribute not an element, so we select the anchor tag element as the element we want to manipulate.