Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript jQuery Basics (2014) Creating a Spoiler Revealer Using click()

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

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

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(){}"

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.