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
Joseph Anson
14,448 PointsFour in a row Object-Oriented JS challenge [Spaces and token are not showing & no errors in console]
When I click the start button the green board will display however there is no token or spaces. I'm so lost on this challenge I'm about to give up, I'm honestly not even sure which code is best to share, I imagine spaces, token, game and app.
I had a few other errors, scripts in wrong order in index file, a capital letter missed out etc which I've found and now no errors show in the console only the token and the spaces are not showing as in the video.
I've looked through the code comparing it to the downloaded files and can't spot any mistakes, I've even tried copying the tutor's method for drawHTMLBoard();
I can't see what I'm missing or doing wrong. I ended up getting rid of some code I created and using the same code as the tutor just in case mine was incorrect (there is still some left) but I don't know how to test it.
If anybody could help it would be much appreciated. I've sat here for a few hours and can not figure it out.
Edit: I've taken a snapshot of the workspace here: https://w.trhou.se/6m4tpfsxlz
2 Answers
KRIS NIKOLAISEN
54,972 PointsThe following will get the spaces and token to appear:
In Space.js uncomment the following line:
// svgSpace.setAttributeNS(null, "r", this.radius - 8);
In Token.js you have
drawHTMLToken(){
const 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;
}
The last line doesn't match the player class (color vs. colour) so you will have to change one or the other. One fix is to change to this.owner.colour here.
token.style.backgroundColor = this.owner.colour;
In doing so you should see the token but it will be black. That is because in Game.js under createPlayers() two arguments are reversed (id and color):
const players = [new Player('Joe', '#e15258', 1, true),
new Player('Sionyn', '#e59a13', 2)];
should be
const players = [new Player('Joe', 1, '#e15258', true),
new Player('Sionyn', 2, '#e59a13')];
That should get a proper display. You are missing code for the game functionality but I'm not sure how far you are in the course.
Joseph Anson
14,448 PointsAmazing, thank you very much. What a pain in the ass I spent ages looking at that! 😁 I am half way through it.
Joseph Anson
14,448 PointsKRIS NIKOLAISEN Thank you for responding. I have saved a snapshot here: https://w.trhou.se/6m4tpfsxlz
KRIS NIKOLAISEN
54,972 PointsKRIS NIKOLAISEN
54,972 PointsAs a quick test I replaced the final project files one at a time with your files and the board and token still appeared so it must be somewhere else. The best thing you could do if you are using a workspace is post a snapshot. It is the camera icon in the upper right corner.
If you are not using a workspace you should be able to create one quickly by going to Workspaces > New then drag and drop all of your files to the lower left corner of the workspace. This will upload them all at the same time. Then create the snapshot.
This will make it much easier to troubleshoot.