javascript - 为什么这个简单的 javascript 函数不能完成它应该做的事情？

Question

我正在尝试编写一个函数，使一串随机数在 html

元素中依次出现。请参阅下面的函数:

document.getElementById("button-1").onclick = function () {
  var numbersArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  var newNumbersArray = [];

  function createNewArray (array) {
    for (i=0;i<50;i++) {
      array.push(numbersArray[Math.floor(Math.random()*11)]);
    }
    return array;
  }

  for (j = 0; j < newNumbersArray.length; j++) {
    document.getElementById("number-display").innerHTML = newNumbersArray[j];
  }
}

该函数的第一部分采用数字 0-10 的数组，并创建一个长度为 50 个元素的新数组，该数组由变量 numberArray 中的随机数组成。然后该函数应该在 html 页面上一个接一个地显示每个数字(请注意，我知道这会发生得太快，以至于您只能看到最后一个数字。我计划稍后添加一个计时器，现在我只是想获得基本功能)。但是，当我单击 html 页面的按钮时，绝对没有任何反应。我错过了什么？

非常感谢您的帮助。我是一个新手(可能很明显)。

Answer 1

问题是你从未调用过createNewArray

document.getElementById("button-1").onclick = function () {
  var numbersArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  var newNumbersArray;

  function createNewArray (array) {
    for (i=0;i<50;i++) {
      array.push(numbersArray[Math.floor(Math.random()*11)]);
    }
    return array;
  }
  
  // this is required
  newNumbersArray = createNewArray([]);

  for (j = 0; j < newNumbersArray.length; j++) {
    document.getElementById("number-display").innerHTML = newNumbersArray[j];
  }
}

<div id='number-display'></div>
<button id="button-1">Action</button>