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 startGame() Method Solution

start button doesn't work. Current error is 'TypeError: this.activePlayers is undefined' -> what's the next steps...

I ran my code in the browser and expected issues. I squashed 2, however I know got this error

TypeError: this.activePlayers is undefined (line 31)

startGame(){ /**

  • Initializes game. */ this.board.drawHTMLBoard(); this.activePlayers.activeToken.drawHTMLToken(); // line 31 here this.ready = true;

    }

My thinking is 1/ check for spelling/character case 2/ i'm not sure how to follow the code to debug further

See code for game.js

class Game {
    constructor() {
        this.board = new Board();
        this.players = this.createPlayers();
        this.ready = false;
    }
    get activePlayers() {
        return this.players.find(player => player.active);
    }
    /** 
 * Creates two player objects
 * @return  {Array}    An array of two Player objects.
 */
    createPlayers() {
        const players = [new Player('Player 1', 1, '#e15258', true),
                         new Player('Player 2', 2, '#e59a13')];
        return players;
    }

    /* Get's game ready for play
    */

    startGame(){
/** 
 * Initializes game. 
 */
        this.board.drawHTMLBoard();
        this.activePlayers.activeToken.drawHTMLToken();
        this.ready = true;
    }

}
Steven Parker
Steven Parker
231,248 Points

The problem might be in another module.
To facilitate identifying the issue, make a snapshot of your workspace and post the link to it here.

So i got further along by looking at the complete solution and did miss some chunks of functionality.

I'm now at the point where the board shows but the spaces are not shown which suggests the masking function isn;t working

http://w.trhou.se/t0ulwk7836

2 Answers

Steven Parker
Steven Parker
231,248 Points

As you work on larger projects, the browser's developer tools will be very handy! Even just the Console would help in finding issues like this.

Turns out there's two spelling issues:

  • line 3 of Board.js has "row" instead of "rows"
  • line 7 of Space.js has "diamater" instead of "diameter"
Steven Parker
Steven Parker
231,248 Points

The console will often indicate an ReferenceError or "undeclared identifier" on a misspelled variable name. When you see such a message, compare the name it is complaining about with the line where you (thought) the variable was declared.

The "rows" issue didn't cause that, but a temporary log message would show that "rows" was undefined.

Ah thanks. I am using firefox and inspect element and because it loads i don't see any issue. How would I debug this kind of issue without thinking there are spelling mistakes and go through each word?

Steven Parker
Steven Parker
231,248 Points

Matt Roberts — See the comments added to my answer.

Glad to help. You can mark the question solved by choosing a "best answer".
And happy coding!