javascript - 添加一个事件监听器来掷骰子 javascript

Question

我目前正在为类开发一个 JavaScript 初学者程序。

程序应向用户显示两个输入字段。第一个输入字段将接受一个整数，该整数将确定骰子有多少面。第二个输入将接受一个整数，该整数将确定掷骰子的次数。

这些输入必须经过验证，只能为正数。输入完毕后，用户点击输入字段，addEventListener('blur') 将触发，骰子将被“抛出”。例如，这应该显示:您掷出:6,2,3,5，总共掷出 16。

建议我们使用一个循环来执行骰子的“滚动”。当模糊事件发生时，循环应该根据需要执行多次，并且应该显示单个滚动加上总和。

我的问题是:

我将如何将骰子被 throw 次数的输入值存储到数组中，然后循环该数组以显示每次骰子 throw 的随机数以及总 throw 次数？每次两个输入字段发生模糊事件时都会发生这种情况。

目前，我的程序仅显示来自骰子侧输入和 throw 量输入的随机数。我尝试使用 for 或 while 循环来完成此任务，但没有成功。这就是我目前拥有的。

function dieInfo() {

  // temporary label to display # of sides
  var dieSideNum = document.getElementById('die-side-num');
  // convert string input into floating integer, 
  // if this doesnt create a number use 0 instead
  var getDieSide = parseFloat(dieSideQuant.value) || 0;
  // temporary label to display throw total
  var throwTotal = document.getElementById('throw-total');
  //convert string input into floating integer
  // if this doesnt create a number use 0 instead
  var getThrowTotal = parseFloat(throwQuant.value) || 0;

  // if die sides input or throw amount input is <= 0
  if (getDieSide <= 0 || getThrowTotal <= 0) {
    // display error for improper number of sides for die input
    dieSideNum.textContent = "Please enter valid Die sides";
    // display error for improper throw amount input
    throwTotal.textContent = "Please enter valid throw amount";
  } else {
    // use random function to store random number from die sides input
    throwRand = Math.floor(Math.random() * (1 + (getDieSide) - 1)) + 1;
    // test- display random number of sides for die
    dieSideNum.textContent = "Number of Sides on Die: " + throwRand;
    // test - display throw count
    throwTotal.textContent = " You threw " + getThrowTotal + "times";

  }
}

// retrieve id for for amount of sides on die
var dieSideQuant = document.getElementById('die-side-quant');
// fire the dieInfo function when the input element loses focus
dieSideQuant.addEventListener('blur', dieInfo);
// retrieve id for throw amount input
var throwQuant = document.getElementById('throw-quant');
// fire the dieInfo function when the input element loses focus
throwQuant.addEventListener('blur', dieInfo);

<h1 id="info-die"> How many sides on die? </h1>

<input type="number" min="0" id="die-side-quant" placeholder="# sides on die">

<h3 id="die-side-num"></h3>

<h1 id="info-throw-die"> Throw Amount? </h1>

<input type="number" min="0" id="throw-quant" placeholder="throw amount">

<h3 id="throw-total"></h3>

a reference picture of what I currently have

Answer 1

要将骰子 throw 次数的输入值存储到数组中，请声明 Array并使用 .push方法。

// declare an Array variable
var dieThrows = [];

// use .push to store the value in the Array.
dieThrows.push(throwRand);

// or don't bother with the extra throwRand variable by doing it this way
dieThrows.push(Math.floor(Math.random() * (1 + (getDieSide) - 1)) + 1);

要循环数组，请使用 .forEach方法或只是迭代值:

// doing it ES5-style:
dieThrows.forEach(function (throwResult, index, array) {
    console.log(throwResult); // display the random numbers for each die throw in the dev tools console
});

// doing it ES6-style:
dieThrows.forEach( (throwResult, index, array) => (console.log(throwResult)) );

// doing it old-school:
for (var i = 0; i < dieThrows.length; i += 1) {
    console.log(throwResult); // display the random numbers for each die throw in the dev tools console
}

要获取抛出的总数，您只需访问 .length数组的属性(因为您将每个抛出存储在数组中):

var totalThrows = dieThrows.length;