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 (2015) Practice Project User Interface Code

Posted by Nadav Reis
Nadav Reis
5,561 Points

Made my own practice game. I am stuck.

Hey all, Working off of the quiz we made here, I tried to make my own Hot or Not game. I made sample images that just show the numbers 1, 2, and 3, rather than showing pic of people. Each pic has an existing score. I am able to get the first score to display. I tried getting the buttons in the game interface to display the options 1 or 2 (1 will eventually be hot, and 2 will be not). I can not get the buttons to display 1 or 2. I don't know why. Can you help find the problem?

Here is the snapshot: https://w.trhou.se/z965v97cp9

Once I get there, I want to work on the voting aspect, when a vote of 1 (hot) will increase the current score by 1. A vote of 2 (not) will just move it to the next pic without raising the score.

Please help me out.

Thank you so much!

3 Answers

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

A button will display the text placed between the start and end tags, as shown below using "Hot" but "1" could be used there instead:

        <button id="guess0" class="btn--default">Hot</button>

Also, in pic.js I happened to notice "this.votes === 1;", which is a comparison expression that does nothing by itself. Perhaps you intended to increase the value with an addition assignment, which would look like this:

    this.votes += 1;
Nadav Reis
Nadav Reis
5,561 Points

Hi Steven Parker , Thanks for answer. I know that the button SHOULD be displaying the text between the tags, but it is not, which is why I am submitting my question. As for the other part in pic.js, that is the part I mentioned that I have not worked out yet. I am currently trying to figure out why the buttons aren't displaying. If you have any insight, please let me know.

Thanks!

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

Before posting the answer, I modified the line shown above in the workspace, opened the preview, and it did indeed display the word "Hot" on the button.

Nadav Reis
Nadav Reis
5,561 Points
Nadav Reis
Nadav Reis
5,561 Points

Oh, thank thank you very much. I will check it out and see what happened.

Nadav Reis
Nadav Reis
5,561 Points

I realize that I can hard code "Hot" and "Not" in. In the quiz exercise, those buttons were being filled dynamically. I am a bit at a loss right now. I am going to keep working on other exercises and come back to this game later. Maybe I will be able to work through the application better once I have a bit more experience.

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

You could use the same mechanism as the course code to fill the labels from the script, but in your application they don't need to change for each answer so it makes more sense to add them to the HTML.

Nadav Reis
Nadav Reis
5,561 Points
Nadav Reis
Nadav Reis
5,561 Points

You are right. I was thinking about that. I am going to come back to this game when I have a bit more skill. I think it will be good practice. Thank you for your help.