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

Richard Eldridge
Richard Eldridge
8,229 Points
Posted by 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

Liam Clarke
Liam Clarke
19,938 Points

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

Diego Cabrera
Diego Cabrera
578 Points

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,529 Points
Tobiasz Gala
.a{fill-rule:evenodd;}techdegree
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,529 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
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);
});
Liam Clarke
Liam Clarke
19,938 Points
Liam Clarke
Liam Clarke
19,938 Points

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

Axel Perossa
Axel Perossa
13,930 Points

Ashley uses a traditional anonymous function in the video.