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

Elena Paraschiv
Elena Paraschiv
9,938 Points
Posted by Elena Paraschiv
Elena Paraschiv
9,938 Points

Append buttons with different text message

How can I append 2 buttons but thye have different names. For example one is Reveal Spoiler and the second Are you curious to find out more

1 Answer

ALFRED MOHENU
ALFRED MOHENU
1,499 Points
ALFRED MOHENU
ALFRED MOHENU
1,499 Points

If you would like to go according to the current lesson and make just a few changes, then you can add these few edits below to your app.js file.

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

//1, Hide spoiler
$(".spoiler span").hide();
//2 , Add a button

$(".spoiler").append("<button>Reveal Spoiler!</button>").click(function (){
  $(".spoiler").append("<button>Are you curious to find out more?</button>");
});

//3, When Button Pressed
  //3,1 , Show spoiler
  //3,2, Get rid of the button

Whiles this works, there are a few problems.

1) The text doesn't change after every click.

2) The button keeps growing.

To stop these problems, we'll have to make some few changes to our html file that is changing the span element to a button with an id attribute. This way we can reference to the id in our jquery and make the necessary reformations. So your html file will look like this

<!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:-->
<!--Changes made here -->
        <button id="buttonId">Darth Vader is Luke Skywalker's Father! Noooooooooooo!</button>
    </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>

Note the id given to the button.

Your app.js file will look like something like this.

//Prevent spoilerphobes from seeing spoileers
//Solution: Hide spoilers and reveal them through user interaction.
//1, Hide spoiler
//$(".spoiler span").hide();
//2 , Add a button
//$(".spoiler").append("<button>Reveal Spoiler!</button>").click(function (){
  //$(".spoiler").append("<button>Are you curious to find out more?</button>");
//});


$("#buttonId").click(function(){

  $(this).text(function (a,b){
    return b === "Reveal spoiler!!" ? "Are you curious to find out more" : "Reveal spoiler!!"
  });
});

//3, When Button Pressed
  //3,1 , Show spoiler
  //3,2, Get rid of the button

Here we make reference to the buttonId and loop between the different texts for the button using a function.

Hope I understood your question rightly. Happy coding. :-)