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 Rendering the Spaces, Board, and Tokens Solution

Posted by Jonathan Ambriz
Jonathan Ambriz
Courses Plus Student 3,902 Points

I can't find any mention of using a get method in this video. Wasn't using a get htmlToken method a part of the steps?

Here's my code:

    drawHTMLToken(){
        let token = document.createElement('div');
        document.getElementById('game-board-underlay').appendChild(token);
        token.setAttribute('id', this.id);
        token.setAttribute('class', 'token');
        token.style.backgroundColor = this.owner.color;
    }

    get htmlToken(){

    }

3 Answers

Doron Geyer
seal-mask
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,897 Points
Doron Geyer
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,897 Points

Yeah same boat here, would also have made sense to put a return value in the drawHTMLtoken

drawHTMLtoken(){
        const token = document.createElement('div');
        document.querySelector('#game-board-underlay').appendChild(token);
        token.setAttribute("id",this.id);
        token.setAttribute("class","token");
        this.style.backgroundColor = this.owner.color;
return token;
    };
get htmlToken(){
        return this.drawHTMLtoken
    };
Clinton Hays
.a{fill-rule:evenodd;}techdegree seal-36
Clinton Hays
Front End Web Development Techdegree Graduate 18,156 Points

Doron Geyer yeah! I finally just had to look through the final code to figure it out. I dunno why, but that one stumped me. I added an edit to my answer to point people to yours for the correct response.

Clinton Hays
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Clinton Hays
Front End Web Development Techdegree Graduate 18,156 Points
Clinton Hays
.a{fill-rule:evenodd;}techdegree seal-36
Clinton Hays
Front End Web Development Techdegree Graduate 18,156 Points

Looking for the same answer, haha! Here is my getter:

    get drawHTMLToken () {
        return token;
    }

The requirement for the getter method reads:

  1. This getter method should return the HTML token element associated with the Token object.

I assume this is referring to the let token = document.createElement('div'); in the first line of the method, but i'm not 100% positive.

Guess we'll see what happens as we go along. Haha!

EDIT: See @Doron Geyer's answer below!

Mitchell Wintrow
Mitchell Wintrow
4,380 Points
Mitchell Wintrow
Mitchell Wintrow
4,380 Points

This was exactly what I was thinking too. I thought there was supposed to be an explanation for every step, but I guess we are just supposed to figure out some stuff on our own with absolutely no explanation... I have no idea if I did the getter method properly and that was pretty much the last part I wanted to double check to make sure I was correct...

I have what you wrote Doron Geyer , am I correct?

  /**
   * Draws new HTML token.
   */
  drawHTMLToken() {
    const token = document.createElement('div');
    document.getElementById('game-board-underlay').appendChild(token);
    toke.setAttribute('id', this.id);
    token.setAttribute('class', 'token');
    token.style.backgroundColor = this.owner.color;
  }

  /**
   * Returns newly drawn token? No explanation...
   */
  get htmlToken() {
    return this.drawHTMLToken;
  }