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 Adding New Attribute Values with attr()

Posted by Cynthia Gorsick
Cynthia Gorsick
9,737 Points

I'm missing something in my challenge?

I seem to be missing something or doing something incorrectly in my challenge code. I've set the var external to the class "external" so that I can add the attribute. I've tried so many variations of the .attr. I feel like I'm making a silly mistake but I've been looking at it so long now that I just can't see or come up with a new idea to try. Am I missing something huge here?

Sometimes the objectives confuse me about whether or not I need to include an actual word. The word "target" is emphasized when referring to the attribute. I was assuming it is the "attribute name" and that I should include it with the "value" of _blank.

I wish there was a more detailed way for it tell me if part of what I've done here is correct so I can look for where my error it is and just fix that. But I keep changing this and that, it just tells me syntax error and I don't know where to go to fix it or if everything I've typed is just flat out wrong.

"Using jQuery only, add to all links with the class "external", the target attribute with the value of "_blank"."

js/app.js 
var $external = $("<div class="external"></div>");
  $external.attr("target", "_blank");
index.html 
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
  <title>Links Page</title>
</head>
<body>
  <h1>Links</h1>
  <ul>
    <li><a href="http://google.com" class="external">Google</a></li>
    <li><a href="http://yahoo.com" class="external">Yahoo</a></li>
  </ul>
  <script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

2 Answers

edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

Hi Cynthia,

No need to create any variables here. You can just target all the classes of external like this:

$('.external')

and then the way you added the attribute was fine.

If you wanted to first make a variable out of the elements with the class of 'external', however, the structure would be along these lines:

var $external = $('.external');

Hope that helps,

Ede

Cynthia Gorsick
Cynthia Gorsick
9,737 Points

Thank you so much! Do you know if my code was functional though? I know it wasn't what the challenge was looking for, and that this is a much more effective way to do it. But was my code functional? I want to make sure I'm at least understanding the code I am creating. In all the videos, we created a var to a div. Was it because it was simply a larger project? There always seems to be a much simpler answer than the ones I create for the challenges, and I feel like maybe I am just over thinking things.

edit well it looks like you went back and answered my question for me already, thank you! Leaving my question for reference.

edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

Hey Cynthia,

I just updated to my answer to show an option where you would create a variable first :)

I'm still learning as well, I'm afraid, so I'm not the best person to explain. Your code would've created a variable, and inside that variable would be a div, with a class of external. It wouldn't have •selected• all existing divs, with classes of external. Which is what you needed to be doing here.

Oh, there was one error with your quote marks. Your opening and closing quote marks need to not be the same as any in between.

I.e, not this:

$("<div class="external"></div>");

(as the second instance of the double quote mark - after 'class' - is being read as the closing quote mark)

but this:

$("<div class='external'></div>");

or this:

$("<div class=\"external\"></div>");

etc.

Hope that helps,

Ede

edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

Good stuff. You can mark an answer as 'best answer' for easier reference.

All the best,

Ede

Cynthia Gorsick
Cynthia Gorsick
9,737 Points
Cynthia Gorsick
Cynthia Gorsick
9,737 Points

Thank you again so much! It's so easy to miss those silly mistakes sometimes when you're trying to focus on the bigger picture!

edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

Yes, you're right! It's very painful to comb code, without any hint to the problem.

Glad it helped anyway,

Ede