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

Posted by Kristian Woods
Kristian Woods
23,414 Points

Why does the button appear above the text and not below it, on a separate line?

Just not sure why the button sits on top of the text. I would think, that by using the append() method, it would append the below the text - on a separate line. Yet, it sits on top of the text... could someone explain why?

Thanks

<!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.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

//Prevent spoilerphobes from seeing spoilers
//Solution: Hide spoilers and reveal them through user ineraction

// 1. hide spoiler
$(".spoiler span").hide();
// 2. add button
$(".spoiler").append("<button>Reveal Spoiler</button>");
// 3. when button pressed:
    //3.1 show spoiler
    //3.2 delete button
Kristian Woods
Kristian Woods
23,414 Points

Also, by "above" - I meant inline with the text

Kristian Woods
Kristian Woods
23,414 Points

this is the css 

body {
  background: #2f558e url(../img/bg.png) repeat 0 0;
  background-size: 400px auto;
  font-family: sans-serif;
}
img {
  display: block;
  width: 150px;
  margin: 100px auto;
}
button {
  background: #dae1e4;
  border: none;
  border-radius: 5px;
  color: #1d3c6a;
  font-size: 24px;
  width: 480px;
  padding: 40px 0;
  margin: -40px -20px;
  outline: none;
  cursor: pointer;

}
.spoiler {
    background: #1d3c6a;
  width: 440px;
  margin: 0 auto 20px;
  border-radius: 5px;
  padding: 40px 20px;
  text-align: center;
  font-size: 24px;
}
.spoiler span {
  color: #dae1e4;
}
john larson
john larson
16,594 Points

Hopefully someone will give a better answer but, I think what happens here is the text is hidden so the button goes in the place where the text WOULD be. Because, when something is hidden, it's not just invisible, it's like its not even there. So the button is taking it's place.