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
Ashley Jennings
3,087 PointsRandom Array Index - Confused on last part of Project
Here is a snapshot of my workspace ---> https://w.trhou.se/zxcijbckdl
When I previewed my workspace and opened up the console, everything seems to be working except I keep getting the error code "uncaught TypeError: Cannot create property 'innerHTML' on number __" I also cant seem to replace the "#" symbol to actually show a score when I click 'Play'
Any advice and or tips would be greatly appreciated.
4 Answers
KRIS NIKOLAISEN
54,971 PointsWhen asked to "Create two variables to store player one and player two scores" those should be new variables.
let scoreOne = diceRoll(twelveSidedDie);
let scoreTwo = diceRoll(twelveSidedDie);
Instead you have reassigned numbers to the element variables that you will need later on. Then "Set the innerHTML of the scoreOneElement and scoreTwoElement variables above equal to the dice roll variables you just created" would be
scoreOneElement.innerHTML = scoreOne;
scoreTwoElement.innerHTML = scoreTwo;
Victor Mercier
14,667 PointsHi Ashley, the problem is that your are generating some random numbers in some variables that are DOM elements and when replacing the values of these variables, the variables now hold some numbers, not some DOM elements. This is why you are getting an error when using the innerHTML property, which is not available on numbers.
What you could do is that:
playBtn.addEventListener('click', () => {
// YOUR CODE GOES HERE!!! Do the steps below to complete this challenge
// 4) Create two variables to store player one and player two scores
// 4a) Set both variables equal to a call to the `diceRoll` function - Arguments: twelveSidedDie
console.log('Player 1 Score: ' + scoreOneElement + ', Player 2 Score: ' + scoreTwoElement);
// 5) Log out the two variables above to test their values — check them out in the console
console.log('Player 1 Score: ' + scoreOneElement + ', Player 2 Score: ' + scoreTwoElement);
// 6) Set the innerHTML of the `scoreOneElement` and `scoreTwoElement` variables above equal to the dice roll variables you just created
scoreOneElement.innerHTML = diceRoll(twelveSidedDie);
scoreTwoElement.innerHTML = diceRoll(twelveSidedDie);
// Helpful log statement to test function — You can comment out this if you like
console.log('Play button is functional!');
// Calling helper function from color-changer.js to set the color of the results
updateColors(scoreOneElement, scoreTwoElement);
});
If it helped you out, do not forget to mark as best answer! Happy Coding!
Ashley Jennings
3,087 PointsThank you for taking the time to explain that to me, it definitely made sense.
Victor Mercier
14,667 PointsThe best way to thanks me is by marking as best answer, if you want.
Brittney Scott
1,801 PointsI'm confused. How do I do this part? .........Load the index.html file in Chrome and open the Chrome DevTools console. If you don't know how to do that, please reach out in Slack. Next, follow along with the comments in the js/script.js file to complete this challenge. When you are done, clicking the play button will reveal on the page and in the console, two random numbers for two players competing to get the highest number.
Ashley Jennings
3,087 PointsAshley Jennings
3,087 PointsThank you so much for explaining that to me, it worked!