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
Scott Raymond
6,542 PointsI need help with JavaScript, JQuery for a Lucky Sevens dice game.
This is for a Lucky Sevens Dice game. I need the two virtual dice to roll when the player presses PLAY. I am struggling with how I link up my simple HTML with the PLAY button and rolling of dice. The click function is the rolling of the two random numbers right?? I could use some help because I have been stuck on this for days. Thanks in advance.
$("button").click(function(){ var dieRoll= Math.floor(Math.random () *6 ) +1; var dieRoll2=Math.floor(Math.random () *6 ) +1; var dieTotal= dieRoll + dieRoll2; var message = "<p>You rolled " + dieRoll + "and " + dieRoll2 + ".</p>"; document.write(message); });
4 Answers
Kevin Goudswaard
11,061 PointsHow about this?
$("button").click(function(){
var dieRoll= Math.floor(Math.random() *6 ) +1;
var dieRoll2=Math.floor(Math.random() *6 ) +1;
var dieTotal = dieRoll + dieRoll2;
var message = "You rolled a " + dieRoll + " and a " + dieRoll2 ;
document.getElementById("idofyourHTMLelementgoeshere").innerHTML = message;
});
Watch out for spaces next to functions. You had .random () not .random()
Hope this helps!
K
Steven Parker
243,228 PointsYour code seems to work fine, if your intention is to replace the page having the button with the results of the roll. Spaces between a function name and the parentheses are ignored.
You didn't share your HTML, but this code obviously requires JQuery. If it is not working, did you remember to load JQuery?
If your issue is the replacement of the page contents, that is what happens when you use document.write after the page is loaded. If that is not your intention, you could replace some designated element's contents instead, as Kevin suggested.
Kevin Goudswaard
11,061 PointsGreat points. All relevant depending on his aim. I figured he's using document.write as a test medium, but it sounds like hes looking at a Web app which is why I suggested HTML manipulation. Thanks for the heads up on spaces ().
Kevin Goudswaard
11,061 PointsOk, I see. Yeah I remember the innerHTML stuff coming later in the javascript modules. (at least in the front end development track)
what that line essentially does is traverse your HTML to locate an element. It then "grabs" that element and plugs your message into it. What I did was create a h2 element with the id of myMessage in your html. then I pointed to that using that javascript code. Now, when you hit the button, jquery runs the click function, which runs your code, assembles your message, then plugs the whole message into the h2 element.
I also had to change your button's type attribute. If you say type="submit" you are submitting the contents of the form. you want the button to simply execute code, so I changed it to type="button"
lastly, you have to plug in jquery to your HTML. To do this, include the jquery link in your html.
I put all this into a codepen so you can see the code and the changes. I am at work so I cannot work on the betting part of your app. I am new too though, and find out a lot of stuff by just being an active google searcher. stay positive man!
here's a link to your code:
http://codepen.io/anon/pen/RamPme
K
Scott Raymond
6,542 PointsI'll play around with this tonight. (I'm at work too). Thanks so much for the help and the encouragement!
Kevin Goudswaard
11,061 PointsMy pleasure! great app idea.
Scott Raymond
6,542 PointsAwesome. I have a function that works and generates a random roll of dice. What I have to do now is a while loop I assume. Because the task is to perform this virtual roll until the bankroll is $0. If the total = 7, the player wins $4. Else the player losses $1.
The program asks the user how many dollars they have to bet. When the user clicks the Play button, the program then rolls the dice repeatedly until all the money is gone. Hint: Use a loop construct to keep playing until the money is gone. The program keeps track of how many rolls were taken before the money ran out. The program keeps track of the maximum amount of money held by the player. The program keeps track of how many rolls were taken at the point when the user held the most money.
This is in my pre-work for my coding boot camp that begins May 31 but seems like the toughest thing out of everything I have done for this. If you have time and want to help give pointers that would be awesome. Thanks for the help thus far!
Kevin Goudswaard
11,061 PointsThat sounds really easy and fun to do! I'll see if I have some free time in the next few days to help. Just out of curiosity, which camp did you select?
Scott Raymond
6,542 PointsThe Software Guild. Start May 31. I just need a lot of practice. I'll get there though.
Scott Raymond
6,542 PointsScott Raymond
6,542 PointsThanks for the help. I am very green at all this. I am struggling with how to make the PLAY button turn into the rolling of the two virtural dice and then show the result. So I pasted my HTML in. I also made the changes that people suggested. But I am not sure what id of my HTML elements should be plugged in there. Button??
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Lucky Sevens</title> <link rel="stylesheet" href="css/bootstrap.css"> <link href='https://fonts.googleapis.com/css?family=Merriweather:400,700,900,700italic' rel='stylesheet' type='text/css'>
</html>