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 trialraul montes
134 PointsFew 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
Liam Clarke
19,938 PointsHi 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.
Hope this helps!
Routine Poutine
26,050 PointsHi 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