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 Spoiler Revealer Perform: Part 1

Mark Bradshaw
PLUS
Mark Bradshaw
Courses Plus Student 7,658 Points
Posted by Mark Bradshaw
Mark Bradshaw
Courses Plus Student 7,658 Points

My jquery code is not showing up on my webpage. I have no idea what i'm doing wrong.

Here's my html page with my html with my jquery attached in the body: 

<!DOCTYPE html>
<html>
<head>
    <title>Star Wars Spoilers</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
    <img src="img/deathstar.png" />
    <p class="spoiler">
        <!--Spoiler:-->
        <span>Darth Vader is Luke Skywalker's Father! Noooooooooooo!</span>
    </p>
  <script src=http://code.jquery.com/jquery-1.11.1.min.js</script>
 <script src="js/app.js" type="text/javascript" charset="utf-8"></script>

</body>
</html>

Here's my app.js page with what i'm trying to do which is hide the spoiler alert and create a clickable radio button:

$(".spoiler span").hide();
$(".spoiler").append(<"button>Reveal Spoiler!</button>");
thomascawthorn
thomascawthorn
22,986 Points

Hey Mark. I've edited your post so you can see how to show code in future posts. You can always click on the Markdown Cheatsheet to see more things you can do!

4 Answers

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

In the script tag calling jQuery there are no quotes.

If you are not running a local server it may be problematic to load outside sources, such as jQuery from a CDN. If and when that happens download a copy of the file and place into your js/ directory (using jQuery as an example) and use this script after the one you have calling the online source:

<script>window.jQuery || document.write('<script src="js/jquery-1.11.1.min.js"><\/script>')</script>

When doing so just be sure that the file you have downloaded and placed in a local directory is named the same as the content of the src attribute of the script tag or vice versa -- they must be the same file name.

nathon reed
nathon reed
8,521 Points
nathon reed
nathon reed
8,521 Points

Mark Bradshaw on your app.js there is a small syntax error

your code:

$(".spoiler").append(<"button>Reveal Spoiler!</button>");

there error is in your append argument

.append("<button>Reveal Spoiler!</button>");
Tracey Moneypenny
Tracey Moneypenny
3,858 Points
Tracey Moneypenny
Tracey Moneypenny
3,858 Points

$(".spoiler").append("<button>Reveal Spoiler!</button>"); The < needs to be inside the ".

ellie adam
ellie adam
26,377 Points
ellie adam
ellie adam
26,377 Points

.append("<button>Reveal Spoiler!</button>");