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 Object-Oriented JavaScript: Challenge Rendering the Game Connecting with the DOM Solution

Few questions regarding this step

Hello guys, I used jQery as follow:

$('#begin-game').on('click', 'button', ()=>{ this.style.display = 'none'; document.getElementById('play-area').style.opacity = '1'; game.startGame(); });

First question is regarding as if it will work my code as I wroted it

My second question is if instead of using "game.startGame();", I wrote: "return startGame();" It will work? there is any difference between using the return method and the game. call?

Thanks guys!

2 Answers

Hi Raul

First question, Your code will not work, there are very small differences to how you call an event handler and the use of this.

Here are 4 examples that look the same but this and the event are very different.

Run this code in your browser and check out the results:

// Number One
$('#begin-game').on('click', 'button', ( e ) => {
    console.log( $(this) );
    console.log( e );
    $(this).addClass("hide");
});

//Number Two
$('#begin-game-2').on('click', 'button', function( e ) {
    console.log( $(this) );
    console.log( e );
    $(this).addClass("hide");
});

//Number Three
$('#begin-game-3').on('click', function( e ) {
    console.log( $(this) );
    console.log( e );
    $(this).addClass("hide");    
});

//Number Four
(function( $ ) {

    var bindEvent = function() {
        $('#begin-game-4').on('click', _beginGame);
    };

    var _beginGame = function( e ) {
        console.log( $(this) );
        console.log( e );
        $(this).addClass("hide");    
    };

    bindEvent();

})( jQuery );
    <div id="begin-game">
        <button>Click me</button>
    </div>

    <div id="begin-game-2">
        <button>Click me 2</button>
    </div>

    <div id="begin-game-3">
        <button>Click me 3</button>
    </div>

    <div id="begin-game-4">
        <button>Click me 4</button>
    </div>

The first one is your code and you will see that "this" returns the window object, therefore, does not work as you expect.

The second one is exactly the same but uses a function rather than an arrow function, this does work as intended.

The third one is the same as the second with the id on the button instead of the outer div.

The Fourth one uses a module pattern with binding. This does work but again works slightly differently to the other examples that you will see in the console.

Run these four examples and see the minor differences and then I recommend reading a couple of the following articles which explain this very well.

this keyword

understanding this

design patterns

Hope this helps!

Routine Poutine
Routine Poutine
26,050 Points

Hi Liam,

Thanks for posting the Design Patterns book. Is there a free Software Architecture book online as well? That's a topic I'm confused about and would like to read more on. Thanks!

Matt