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

Richard Eldridge
Richard Eldridge
8,229 Points

Would this work?

const newGame = new Game();

const event = function (){
    newGame.startGame();
    this.style.display = 'none';
    document.getElementById('play-area').style.opacity = '1';
};

document.getElementById('begin-game').addEventListener('click', event);

Any difference in function to the solution code?

Thanks!

4 Answers

Hi Richard

There is no difference in your solution, it will work as expected, it really goes down to the readability of your code so whatever is easier for you to visually read.

FYI, here's the tutor's solution:

const game = new Game();

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

both do the same job, it's just whatever makes sense to you.

Good Luck

Liam Clarke Your Answer is wrong because , the context of "this" inside event click is window , the arrow function work different , try you and you can see the result --> app.js:5 Uncaught TypeError: Cannot set property 'display' of undefined

the Anonimus function is a good way to solve this

Tobiasz Gala
seal-mask
.a{fill-rule:evenodd;}techdegree
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,517 Points

Nope, in the code above arrow function is used and 'this' actually refers to the window object. You can use function declaration or event object with target property like this.

const game = new Game();

document.getElementById('begin-game').addEventListener('click', (e) => { // 1
    game.startGame();
    e.target.style.display = 'none'; // 2
    document.getElementById('play-area').style.opacity = '1';
});
Ignacio Martin Elias
Ignacio Martin Elias
10,127 Points

Just if anyone was wondering how to do this with jQuery....

const game = new Game();

$("#begin-game").click(function(){
    game.startGame();
    $(this).hide();
    $("#play-area").css("opacity", 1);
});

Hi Diego, after reviewing the project in question I can confirm that the solution to the project does work still so the error you are getting is different although related, something to note is how Ashley uses an arrow function which has different behaviours with "this" in the Object Oriented project.

This is not how I would specifically tackle this project, If you have any concerns with the solution to the project, you can message the tutor, Ashley

Thanks

Liam

Ashley uses a traditional anonymous function in the video.