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 trialRaviv Fontaine
4,270 PointsFailure 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();
});```
Raviv Fontaine
4,270 PointsHi there:
Okay, I think I've done so correctly. Here they are:
app.js:
index.html:
Steven Parker
231,261 PointsYou only need one snapshot, since it captures the entire project.
2 Answers
Steven Parker
231,261 PointsWhere 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
4,270 PointsOH 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
9,686 Points99% 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
4,270 PointsYou'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
231,261 PointsYou 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". 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
4,270 PointsHonestly 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.
Antti Lylander
9,686 PointsAntti Lylander
9,686 PointsCan you take a snapshot of your workspace, please.