Fortune Cookie Lotto Generator

Question

Hello TreeHouse Community! I'm trying to use Andrew's dice code to generate 6 random number(instead of 1 random number for the die) from 1-49 for my Fortune Cookie Lotto Generator. I tried using a loop but it didn't work. It did work when I added document.write but it took me to another page instead of staying on the same page. I included all the html, css, and javascript code. So our lucky number should be something like this: 33 2 40 12 8 44 I really appreciate your help JAVASCRIPT

function fortuneCookie(range) {
  this.range = range;
  this.breakCookie = function () {
    var randomNumber = Math.floor(Math.random() * this.range) + 1;
    return randomNumber;
  }
}

var counter = 0;
while ( counter <= 6 ) {
  var number = new fortuneCookie(49);
  counter += 1;
}

function lotto(number) {
  var placeholder = document.getElementById("lottoDisplay");
  placeholder.innerHTML = number;
}

/* button */
var button = document.getElementById("fortune-button");
button.onclick = function() {

  var total = number.breakCookie();
  lotto(total);
};

CSS

body {
  background: #384047;
}

.fortune-cookie-h1 {
  color: #fff;
}

.program {
  display: block;
  margin: 200px auto;
  padding: 40px;
  text-align: center;
  width: 80%;
  background-color: #fff;
  border-radius: 10px;
}

#fortune-button {
  display: block;
  margin: 0 auto;
  padding: 12px 20px;
  font-weight: 400;
  width: 250px;
  border: 3px solid;
  font-size: 1em;
  color: #fff;
  background-color: #384047;
}

#lottoDisplay {
  margin: 20px auto;
  height: 50px;
  width: 250px;
  border: 1px solid;
  border-radius: 1em;
  font-size: 1.5em;
  background-color: #fff;
}

#lottoDisplay:after {
  color: #4b515d;
}

HTML

      <div class="program">
        <h1 class"fortune-cookie-h1">Fortune Cookie Lotto Number</h1>
          <p id="lottoDisplay">
          </p>
          <button id="fortune-button">My Number</button>
      </div>

The original Javascript code is:

function Dice(sides) {
  this.sides = sides;
  this.roll = function () {
    var randomNumber = Math.floor(Math.random() * this.sides) + 1;
    return randomNumber;
  }
}

var dice = new Dice(6);

function printNumber(number) {
  var placeholder = document.getElementById("placeholder");
  placeholder.innerHTML = number;
}

var button = document.getElementById("button");

button.onclick = function() {
  var result = dice.roll();
  printNumber(result);
};

Answer 1 · 2017-11-10T03:42:44Z

November 10, 2017 3:42am

You don't need that current loop at all. But you could do this in the button handler:

button.onclick = function() {
  var number = new fortuneCookie(49);
  var total = "";
  for (var i = 0; i < 6; i++) {
    total += number.breakCookie() + " ";
  }
  lotto(total);
};

BTW, I heard just today on the radio someone WON the lotto by using an actual fortune cookie!

Answer 2 · 2017-11-10T03:29:31Z

November 10, 2017 3:29am

I notice that you are trying to create a unique instance of number in a while loop. the problem with this is that each iteration overwrites the previous value.

1) I would replace the while loop with a for loop.

this wont solve the problem, but its cleaner and more compact and will play nicely with the next things you wanna do. which is to place the loop inside the onClick handler. that way it is only fired when the button is clicked. the way its set up now the loop runs as soon as the page loads.

2) i would take what you have in the click handler and place it within your loop, then place that in onClick.

i think this alone will not solve your problem because each iteration will just overwrite whats in the lottoDisplay.

so i would try to push the result of each iteration to an array and then display the array when the loop ends.

Answer 3 · 2018-04-12T18:19:43Z

April 12, 2018 6:19pm

I have made a lottery simulator, too! Here is how I created the row (random40 is a funtion that makes a random number 1-40). The row is stored in an array and when new random number is created it will be added to the array only if it's index is -1, i.e. there is no same number already.

function createPlayerRow() {

playerRow = [];
  do {
    let ball = random40();
    if ( playerRow.indexOf(ball) === -1 ) {
      playerRow.push(ball);
    }

  } while ( playerRow.length < 7 );
};

Welcome to the Treehouse Community

Looking to learn something new?

Asaad Khattab

Asaad Khattab

Fortune Cookie Lotto Generator

3 Answers

Steven Parker

Steven Parker

Asaad Khattab

Asaad Khattab

Steven Parker

Steven Parker

Zack Lee

Zack Lee

Zack Lee

Zack Lee

Asaad Khattab

Asaad Khattab

Antti Lylander

Antti Lylander

Steven Parker

Steven Parker

Asaad Khattab

Asaad Khattab

Antti Lylander

Antti Lylander

Steven Parker

Steven Parker

Antti Lylander

Antti Lylander

Steven Parker

Steven Parker

Antti Lylander

Antti Lylander

Steven Parker

Steven Parker

Antti Lylander

Antti Lylander