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

Angelica Guerrero
Angelica Guerrero
1,104 Points
Posted by Angelica Guerrero
Angelica Guerrero
1,104 Points

Problems with the Challenge from "Treehouse FSJS Techdegree - Project Warm Up * Random Array Index - JS"

Hello- I have completed the challenge project at https://teamtreehouse.com/library/talentpath-javascript-starter-project

I've noticed a problem- while I believe that I have followed all of the prompts for code correctly, upon reviewing the preview site, the animation does not run. and an error appears in the console. The error points to code that comes pre-written into the challenge, which I am not supposed to edit. My code results check out in the console, but the animation javascript is not working, so the challenge isn't complete.

The error message in the console reads: color-changer.js:35 Uncaught TypeError: Cannot read properties of null (reading 'innerHTML') at updateColors (color-changer.js:35:18) at HTMLInputElement.<anonymous> (script.js:31:3) Am I just doing something wrong? Or is there a problem with the challenge as written?

3 Answers

Angelica Guerrero
Angelica Guerrero
1,104 Points
Angelica Guerrero
Angelica Guerrero
1,104 Points

Oops, you're right, wrong snapshot. I think I accidentally deleted the right one.

I corrected the code as far as I can tell, and I think I figured out what the problem was. I've had continued trouble getting the preview pages to upload the changes I make to my workspaces across this track. I just noticed, for example, that the preview console was giving me error messages for a line of code that did not still exist in my workspace. another user suggested that I save and refresh to override cached files- I'll start doing that regularly. Hopefully that resolves the problems I've been having.

jb30
jb30
44,806 Points
jb30
jb30
44,806 Points

In lines 57 to 59 of script.js,

  // 6) Set the innerHTML of the `scoreOneElement` and `scoreTwoElement` variables above equal to the dice roll variables you just created
  scoreOneElement === playerOne;
  scoreTwoElement === playerTwo;

The === will compare the two variables to determine if they have the same value and the same type, so the statements will be either true or false. The result of the comparison is then ignored, since it isn't assigned to a value.

To set the innerHTML of scoreOneElement to playerOne, try scoreOneElement.innerHTML = playerOne;

Angelica Guerrero
Angelica Guerrero
1,104 Points
Angelica Guerrero
Angelica Guerrero
1,104 Points

I already tried that before. Even with that code, there's the same exact problem:

https://w.trhou.se/zx3s38ifnu

The error continues to point at the code that came packaged into the challenge, and I don't think it has anything to do with my code.

Error reads: color-changer.js:35 Uncaught TypeError: Cannot read properties of null (reading 'innerHTML') at updateColors (color-changer.js:35:18) at HTMLInputElement.<anonymous> (script.js:66:3) updateColors @ color-changer.js:35 (anonymous) @ script.js:66

jb30
jb30
44,806 Points

In both of the provided snapshots, lines 57 to 59 are currently

  // 6) Set the innerHTML of the `scoreOneElement` and `scoreTwoElement` variables above equal to the dice roll variables you just created
  scoreOneElement === playerOne;
  scoreTwoElement === playerTwo;

The difference between the snapshots is in lines 15 and 16, where

const scoreOneElement = document.querySelector('#score-1');
const scoreTwoElement = document.querySelector('#score-2');

was changed to 

const scoreOneElement = document.querySelector('playerOne');
const scoreTwoElement = document.querySelector('playerTwo');

Was this the snapshot you meant to link?

Using the original snapshot, scoreOneElement is referring to <p id="score-1" class="score">#</p>, and scoreOneElement.innerHTML is initially "#". When you pass scoreOneElement to the updateColors in line 66, it tries to convert # to a number, which gives NaN since # is not a number.

With the new snapshot, scoreOneElement is set to document.querySelector('playerOne'). Since there is no . or #, it looks for the tag named playerOne, such as in <playerOne></playerOne>. Since there is no such tag in the html file, scoreOneElement is null. When you pass scoreOneElement to the updateColors in line 66, it tries to access the innerHTML property of null, giving you the error.

Angelica Guerrero
Angelica Guerrero
1,104 Points
Angelica Guerrero
Angelica Guerrero
1,104 Points

I refreshed to override the cache (shift+command+R) and the problem resolved! Now I'm getting a different error- GET http://port-80-y74olktylj.treehouse-app.com/favicon.ico 404 (Not Found)

I'm assuming that's just a problem with a ling to an icon on the page?