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 Understanding jQuery Events and DOM Traversal Adding New Elements to the DOM

Raviv Fontaine
Raviv Fontaine
4,270 Points

Failure to create and append jQuery element to webpage

When trying to replace the HTML button element with the 'unobtrusive' kind by creating the element in jQuery, on preview neither the button nor spoiler are displaying at all. I haven't changed anything else and have copied the code from the video - not sure what the bug is here. This error is throwing me off all the subsequent lessons because it's replicated across all my workspaces, and I can't figure out why the $button element I'm trying to append to the webpage is not displaying. I don't know how to past the code window... Can somebody help?

```//Create a Reveal Spoiler button in jQuery

const $button = $('<button>Reveal Spoiler</button>');

// Append the button to the webpage

$('spoiler').append($button);

// Hide the spoiler element upon loading

$('.spoiler span').hide();

// On user click, show spoiler and hide button

$('.spoiler button').click(function(){

$('.spoiler span').show();

$('.spoiler button').hide();

});```

Antti Lylander
Antti Lylander
9,686 Points

Can you take a snapshot of your workspace, please.

Raviv Fontaine
Raviv Fontaine
4,270 Points

Hi there:

Okay, I think I've done so correctly. Here they are:

app.js:

https://w.trhou.se/0ik8fjm3l1

index.html:

https://w.trhou.se/hytzvf32jc

Steven Parker
Steven Parker
231,236 Points

You only need one snapshot, since it captures the entire project.

2 Answers

Steven Parker
Steven Parker
231,236 Points

Where you append the button, the selector is missing the period to indicate it is for a class:

$('.spoiler').append($button);  // <-- note period added

Without the period, it is treated as a tag name (which of course does not exist).

Raviv Fontaine
Raviv Fontaine
4,270 Points

OH FOR THE LOVE. Thank you so much - I have been obsessing over this for the last 18 hours and could not figure out for the life of me what was wrong here.

Antti Lylander
Antti Lylander
9,686 Points

99% of the times someone said they copied something exactly and it doesn't work the reason is the fact that they failed to copy it exactly. :) You are missing one small but important period there. This happens easily when you copy something and don't think so much on your own. Then it's almost impossible to spot.

below is the correct snippet:

// Append the button to the webpage
$('.spoiler').append($button); 
Raviv Fontaine
Raviv Fontaine
4,270 Points

You're right, of course, I recreated it to the best of my ability and then tried to match it as exactly as I could to the video once I realized it wasn't working. Thanks so much for taking the time to point this out!

Steven Parker
Steven Parker
231,236 Points

You didn't do this, but a funny thing other posters often do is title their post as if it were a bug report, something like "Course bug: My answer is correct but does not pass". :laughing: It's all symptoms of what might be called "typo blindness".

I've trained myself to avoid assuming there's a bug until I have someone else look over my code since I know I can also experience this at times. But that said, bugs do show up on rare occasions.

Raviv Fontaine
Raviv Fontaine
4,270 Points

Honestly I was starting to think "Well maybe it's a bug in the latest version of Chrome..." until I tested it in IE and, no. It's me. I'm the bug.