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 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,975 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,975 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