Question on the event listener on app.js

Question

Hello,

With the event listerner which Listens for click on #begin-game and calls startGame() on game object. When I use arrow function for the event listener, I get a TypeError that 'this' is undefined

const game = new Game();

/** 
 * Listens for click on `#begin-game` and calls startGame() on game object
 */
document.getElementById('begin-game').addEventListener('click', () => {
    game.startGame();
    this.style.display = 'none';
    document.getElementById('play-area').style.opacity = '1';
});

BUT when I use the function keyword it works. Please is there any explanation behind this?

const game = new Game();

/** 
 * Listens for click on `#begin-game` and calls startGame() on game object
 */
document.getElementById('begin-game').addEventListener('click', function(){
    game.startGame();
    this.style.display = 'none';
    document.getElementById('play-area').style.opacity = '1';
});

Answer 1 · 2019-01-10T23:31:00Z

January 10, 2019 11:31pm

Here is an explanation on how arrow function binds to "this" https://codeburst.io/javascript-arrow-functions-for-beginners-926947fc0cdc Change "this" to the object itself "document.getElementById('begin-game')" it will work.

Answer 2 · 2019-01-10T23:35:50Z

January 10, 2019 11:35pm

Thanks very much

Welcome to the Treehouse Community

Looking to learn something new?

ada harrison

ada harrison

Question on the event listener on app.js

Dave StSomeWhere

Dave StSomeWhere

2 Answers

Martin Zarate

Martin Zarate

ada harrison

ada harrison