Question

我正在制作一个骰子套装，其功能是能够设置骰子上的边数以及你想要掷骰子的数量。我能够获取控制台语句，但不能在页面本身输出正确的输出。理想情况下，单击按钮后，它会改变骰子边的数量和集合中的骰子数量。我也无法通过重置按钮重置屏幕上的统计信息。我相信在阵列方面我遇到了问题，但我可能错了。我不是在寻找有人为我做这件事;而是我做错了什么以及如何解决它

这是我一直在使用的the application。

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();
    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...")
  });



});

<!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="diceResetButton" value="Reset Dice Roll"/> </p>
  
<p id="outcome"> </p>
  
  
  
  

</body>
</html>

//
// 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;
    

  }
}

带有Javascript数组的骰子滚轮

0 个答案: