Стороны смены ролика игральных костей и количество игральных костей в наборе

Question

Я создаю ролик для игры в кости, который позволяет пользователям изменять количество сторон на кости, а также изменять количество игральных костей в наборе. Я могу получить консольный вывод, но не правильный вывод на моей HTML-странице. В идеале, когда вы нажимаете кнопку, это изменит количество сторон на кости, а также количество кубиков. Я хотел бы знать, что я делаю неправильно, и как я бы исправил это! Спасибо!!!

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;


  }
}

Answer 1

Это то, что вы хотите? 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>