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 Using click()

Igor Pavlenko
Igor Pavlenko
12,925 Points
Posted by Igor Pavlenko
Igor Pavlenko
12,925 Points

small question on challenge

guys why cant i use the annonomous funtion in the click event as below:

$(".something").click( ()=> {

});

js/app.js 
//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>");
//3, When button pressed
$("button").click( () =>{});
  //3.1, Show spoiler
  //3.2, Get rid of button
index.html 
<!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="//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>

2 Answers

Joe Beltramo
PLUS
Joe Beltramo
Courses Plus Student 22,191 Points
Joe Beltramo
Joe Beltramo
Courses Plus Student 22,191 Points

Not all of the courses have been updated to accept ES6 components. The anonymous function you are attempting to use is from ES6/ES2015, where as the course is expecting syntax from ES5 style JavaScript.

Igor Pavlenko
Igor Pavlenko
12,925 Points
Igor Pavlenko
Igor Pavlenko
12,925 Points

so i can use it?

// 1. HIDE SPOILER $('.spoiler span').hide(); //2. ADD A BUTTON $('.spoiler').append("<button>Reveal the Spoiler</button>"); //3. WHEN BUTTON IS PRESSED $('.spoiler button').click( ()=> { // 3.1 SHOW THE SPOILER $('.spoiler span').show('slow'); // 3.2 GET RID OF BUTTON $(this).remove(); });

but i niticed one problem if i use function :"click( ()=>" it does not work with the class "this" only if i change to anonymous function: "function(){}"

Joe Beltramo
Joe Beltramo
Courses Plus Student 22,191 Points

I'm not sure what you are asking. In your personal development you may use it. You may want to read about what Arrow Functions are used for though, in order to use them correctly.

When it comes to Treehouse, it is best not to use them unless instructed by the teacher or you see the teacher using them in the videos, as some of the quizzes/challenges are expecting a non-arrow anonymous function.