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

Rand Array Index | Need Help Please

I'm doing a Random Array Index project and I am stuck I believe at the last part.

Here is a snapshot of my code: https://w.trhou.se/xh4jzjmuwa

In the script.js file, in comment 6 towards the bottom "// 6) Set the innerHTML of the scoreOneElement and scoreTwoElement variables above equal to the dice roll variables you just created".

I thought I have done this but I can't figure out why my program is not displaying the score on the page under the frog players.

Any help would be appreciated! Thanks in advance.

2 Answers

Sean King
Sean King
5,144 Points

Hi Megan. Good news is that all of your functions are working correctly since the scores are being logged in the console.

[Log] Player 1 Score: 4, Player 2 Score: 5 (script.js, line 53) [Log] Play button is functional! (script.js, line 60)

The issue with your code lies in the display part here:

 scoreOneElement = diceRoll(twelveSidedDie); 
 scoreTwoElement = diceRoll(twelveSidedDie);

What's going on here is that you're trying to set a <p> tag to a number, and JavaScript will let it go through, but nothing will happen. Here's what the console is displaying for the output:

<div id="player-2" class="player-2 player">
  <h3>Player Two</h3>
  <img src="img/mike-the-frog.png" alt="Mike the Frog" id="mike-2" class="mike-2 mike">
   <p id="score-2" class="score">#</p>
</div>

Good news is that this is a simple fix! All you have to do is set the text content of the <p> tags to the result. You can do this one of two ways:

 scoreOneElement.textContent = diceRoll(twelveSidedDie); 
 scoreTwoElement.textContent = diceRoll(twelveSidedDie);

OR

 scoreOneElement.innerHTML = diceRoll(twelveSidedDie); 
 scoreTwoElement.innerHTML = diceRoll(twelveSidedDie);

I, personally, would go with textContent here since we're only trying to display the text of the diceRoll result. If we, say, wanted to add divs using object literals to display previous scores to the left somewhat faded out, we could use innerHTML. I'd challenge you to do that if you want to really get some practice in.

Let me know if you have any other questions.

Thank you so much! It's working now and I will also try the challenge.

Sean King
Sean King
5,144 Points

Good luck! Hint: you'll need to change a paragraph to something that is easier to display in-line. You'll also have to keep track of multiple diceRoll results (have you learned .push() and .shift() yet?) and add some CSS styling to whatever you choose. It's a bit of a bear, but it combines pretty much everything you've likely learned up until now.

Yes I have learned .push() and .shift(). Thanks for the hints and all the help!

which course is it?

It's not apart of a course (in my current track) it's an additional project.