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

Posted by Yannis Bouacida
Yannis Bouacida
9,169 Points

Will this code work ? 

   drawHTMLToken(){
     var token = document.createElement('div');
     var gameBoard = document.getElementById('game-board-underlay');
     gameBoard.appendChild(token);
     div.setAttribute('id',this.id);
    div.setAttribute('class', 'token');
    div.style.backgroundColor = this.owner.color;
    }
Michael Cook
.a{fill-rule:evenodd;}techdegree seal-36
Michael Cook
Full Stack JavaScript Techdegree Graduate 28,962 Points

Also, I would try to get into the habit of using the new ES syntax. Change your var keywords to const.

4 Answers

Michael Cook
.a{fill-rule:evenodd;}techdegree seal-36
Michael Cook
Full Stack JavaScript Techdegree Graduate 28,962 Points

Hey Yannis, your method is definitely syntactically correct, but I do think there are some issues.

  1. You have defined a variable called token and set it equal to the creation of a <div> element. So far so good.

  2. You append token to the game board. Still good.

  3. Now here is the problem, I think. You try to set attributes and CSS on the token, but you're calling the setAttribute method on <div> rather than calling it on the variable pointing to the <div>, which would be token. You also set the attributes after you have appended the token, which isn't really a problem but I think if it were me I would append the token after setting all of its attributes, just for the sake of having a logical order.

Try running your function with

div.setAttribute('id',this.id); div.setAttribute('class', 'token'); div.style.backgroundColor = this.owner.color;

replaced as

token.setAttribute('id',this.id); token.setAttribute('class', 'token'); token.style.backgroundColor = this.owner.color;

If this doesn't work for you, I apologize. I think it will but its been a bit since I touched any DOM scripting. Happy coding!

Stephen Hanlon
Stephen Hanlon
11,845 Points
Stephen Hanlon
Stephen Hanlon
11,845 Points

In the spirit of ES6 syntax and the template literals discussed earlier, i found this to be a little easier to understand creating the Tokens in place of createElement

drawHTMLToken() {
    const gameBoard = document.getElementById('game-board-underlay');
    const token = `<div id="${this.id}" class="token" style="background-color:${this.owner.color}"></div>`;
    gameBoard.innerHTML += token;
  }
Yannis Bouacida
Yannis Bouacida
9,169 Points
Yannis Bouacida
Yannis Bouacida
9,169 Points

Thank you very much for the answer!

Yannis Bouacida
Yannis Bouacida
9,169 Points
Yannis Bouacida
Yannis Bouacida
9,169 Points

I will, I’m actually working on it! Thank you very much for the feedback