CODEWITHSUNDEEP
javascriptjqueryhtmlarraysdice
LordQuackingStick
LordQuackingStick

Reputation: 105

Dice Roller Change Sides and Amount of Dice in Set

I am creating a dice roller that allows users to change the amount of sides on the dice as well as change the amount of dice in a set. I am able to get a console output, but not the right output within my HTML page. Ideally, when you click the button, it will change the amount of sides on the dice as well as the amount of dice. I would like to know what I am doing wrong, and how I would go about fixing it! Thanks!!!

numbers = [
  "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50"
]

$(function() {
  //var dice;
  // For creating a new Diceset
  dice = new DiceSet();

  $("#rollButton").click(function() {
    //var dice, outcomeList, message;
    outcomeList = dice.roll();
    console.log(outcomeList);

    // a good start, but you really don't want to reference //the array this way

    // use a for loop here instead of outcomeList

    message = "Rolled Dice!  " + outcomeList + " <br>";
    $("#outcome").append(message);
  });

  // place click handler for reset here
  $("#diceResetButton").click(function() {
    dice.reset();
    $("#outcome").html("");
    console.log("Reset is Supposed to happen...")
  });
  //click handler for changing the number of sides
  $("#setDiceSetSidesButton").click(function() {
    var select, chosen_number;
    dice.setNumSides(6);
    chosen_number = numbers[select];
    $("DiceSize").html(chosen_number);
    console.log("Amount of Sides on Dice Should Change...")
  });

  // click handler for setting the number of dice in the diceset 
  $("#setDiceSetSizeButton").click(function() {
    var select, chosen_number;
    dice.setDiceSetSize(2);
    chosen_number = numbers[select];
    $("DiceSides").html(chosen_number);
    console.log("Dice Set Amount Should change...")
  });

  // click handler for getting the average number of rolls
  $("#RollAverageButton").click(function() {
    dice.getAverage();
    console.log("Average is Supposed to Be Displayed...")
  });

});
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
  </script>  
  <h1>Dice Roller Simulation</h1>
  <input type="number" id="setDiceSetSize" value="2" id="DiceSize" />
  <input type="button" id="setDiceSetSizeButton" value="Set Dice Size" />
  <br>
  
  <input type="number" id="setDiceSetSides" value="6" id="DiceSides">
  <input type="button" id="setDiceSetSidesButton" value="Set Amount of Sides on Dice" />
  <p> <input type="button" id="rollButton" value="Roll Dice" /> </p>
  <p> <input type="button" id="RollAverageButton" value="Get Average" /> </p>
  <p><input type="button" id="diceResetButton" value="Reset Dice Roll" /> </p>

  <p id="outcome"> </p>

//
// Example use:
//   dice = new DiceSet();
//
//   dice.roll() --> simulates roll and returns array of individual dice results
//   dice.numRolls() --> number of times the set of dice has been rolled
//   dice.getAverage() --> average totals from the sets
//   dice.history --> an array of totals from the set rolls
//
//   dice.reset() --> resets history of dice rolls
//
//   dice.setNumSides(8) --> configure for 8-sided DiceSet
//   dice.setDiceSetSize(4) --> roll 4 dice with each set


class DiceSet {
  constructor() {
    this.sides = 6;
    this.quantity = 2;
    this.history = [];
    this.runningTotal = 0;
  }

  singleRoll() {
    return Math.floor(Math.random() * this.sides + 1);
  }

  setNumSides(numSides) {
    this.sides = numSides;
    this.reset();
  }

  setDiceSetSize(numDice) {
    this.quantity = numDice;
    this.reset();
  }

  reset() {
    this.history = [];
    this.runningTotal = 0;
  }

  numRolls() {
    return this.history.length;
  }

  getAverage() {
    return this.runningTotal / this.history.length;
  }

  roll() {
    var total, same, rollSet, i;
    same = true;
    rollSet = [];
    rollSet[0] = this.singleRoll();
    total = rollSet[0];
    for (i = 1; i < this.quantity; i++) {
      rollSet[i] = this.singleRoll();
      total += rollSet[i];
      if (rollSet[i] !== rollSet[i - 1]) {
        same = false;
      }
    }
    this.history.push(total);
    this.runningTotal += total;
    return rollSet;


  }
}

Upvotes: 1

Views: 1008

Answers (1)

raul.vila
raul.vila

Reputation: 1984

Is this what you want? https://jsfiddle.net/cCrul/8mof1hk4/

//
// Example use:
//   dice = new DiceSet();
//
//   dice.roll() --> simulates roll and returns array of individual dice results
//   dice.numRolls() --> number of times the set of dice has been rolled
//   dice.getAverage() --> average totals from the sets
//   dice.history --> an array of totals from the set rolls
//
//   dice.reset() --> resets history of dice rolls
//
//   dice.setNumSides(8) --> configure for 8-sided DiceSet
//   dice.setDiceSetSize(4) --> roll 4 dice with each set


class DiceSet {
  constructor() {
    this.sides = 6;
    this.quantity = 2;
    this.history = [];
    this.runningTotal = 0;
  }

  singleRoll() {
    return Math.floor(Math.random() * this.sides + 1);
  }

  setNumSides(numSides) {
    this.sides = numSides;
    this.reset();
  }

  setDiceSetSize(numDice) {
    this.quantity = numDice;
    this.reset();
  }

  reset() {
    this.history = [];
    this.runningTotal = 0;
  }

  numRolls() {
    return this.history.length;
  }

  getAverage() {
    return this.runningTotal / this.history.length;
  }

  roll() {
    var total, same, rollSet, i;
    same = true;
    rollSet = [];
    rollSet[0] = this.singleRoll();
    total = rollSet[0];
    for (i = 1; i < this.quantity; i++) {
      rollSet[i] = this.singleRoll();
      total += rollSet[i];
      if (rollSet[i] !== rollSet[i - 1]) {
        same = false;
      }
    }
    this.history.push(total);
    this.runningTotal += total;
    return rollSet;
  }
}

numbers = [
  "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50"
]

$(function() {
  //var dice;
  // For creating a new Diceset
  dice = new DiceSet();


  $("#rollButton").click(function() {
    //var dice, outcomeList, message;
    outcomeList = dice.roll();
    console.log(outcomeList);

    // a good start, but you really don't want to reference //the array this way

    // use a for loop here instead of outcomeList

    message = "Rolled Dice!  " + outcomeList + " <br>";
    $("#outcome").append(message);
  });


  // place click handler for reset here
  $("#diceResetButton").click(function() {
    dice.reset();
    $("#outcome").html("");
    console.log("Reset is Supposed to happen...")
  });
  
  //click handler for changing the number of sides
  $("#setDiceSetSidesButton").click(function() {
    var chosen_number = $("#setDiceSetSides").val();
    dice.setNumSides(chosen_number);
    $("DiceSize").html(chosen_number);
    console.log("Amount of Sides on Dice Should Change...")
  });


  // click handler for setting the number of dice in the diceset 
  $("#setDiceSetSizeButton").click(function() {
    var chosen_number = $("#setDiceSetSize").val();
    dice.setDiceSetSize(chosen_number);
    $("DiceSides").html(chosen_number);
    console.log("Dice Set Amount Should change...")
  });

  // click handler for getting the average number of rolls
  $("#RollAverageButton").click(function() {
    alert(dice.getAverage());
    console.log("Average is Supposed to Be Displayed...")
  });

});
<!doctype html>
<html>

  <head>
    <title>Dice Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

    </script>
    <script src="dice.js"></script>
    <script src="diceLS.js"></script>
  </head>

  <body>
    <h1>Dice Roller Simulation</h1>
    <input type="number" id="setDiceSetSize" value="2" id="DiceSize">
    <input type="button" id="setDiceSetSizeButton" value="Set Dice Size" />
    <br>
    <input type="number" id="setDiceSetSides" value="6" id="DiceSides">
    <input type="button" id="setDiceSetSidesButton" value="Set Amount of Sides on Dice" />
    <p> <input type="button" id="rollButton" value="Roll Dice" /> </p>
    <p> <input type="button" id="RollAverageButton" value="Get Average" /> </p>
    <p><input type="button" id="diceResetButton" value="Reset Dice Roll" /> </p>
    <p id="outcome"> </p>
  </body>
</html>

Upvotes: 1

Related Questions