为何这段简单的JavaScript函数无法实现预期功能？

首先，咱们先揪出最关键的问题：你定义了createNewArray函数来填充newNumbersArray，但从来没有调用过这个函数！所以newNumbersArray一直是空数组，后面遍历它的循环根本不会执行，自然看不到数字显示。

除此之外，代码里还有几个小问题需要修正，我一步步给你拆解：

问题1：未调用数组填充函数 #

你只是定义了createNewArray，但没有执行createNewArray(newNumbersArray)来给空数组塞数据。这就像你买了个空篮子，写了个装水果的教程，但从来没动手装水果一样。

问题2：未声明循环变量 #

你的for循环里的i和j没有用let/const声明，会变成全局变量，可能和其他代码冲突，严格模式下还会报错。

问题3：DOM元素获取未完成 #

你最后一行的document.getElementById("num...")没写完，得确保目标元素的ID是正确的，比如假设是"number-display"之类的。

修复后的完整代码 #

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

  function createNewArray(array) {
    // 用let声明i，避免全局污染
    for (let i = 0; i < 50; i++) {
      array.push(numbersArray[Math.floor(Math.random() * 11)]);
    }
    return array;
  }

  // 关键：调用函数填充数组！
  createNewArray(newNumbersArray);

  // 遍历填充后的数组，依次显示数字
  // 假设目标元素ID是"number-container"，你可以改成自己的ID
  const displayElement = document.getElementById("number-container");
  // 先清空容器，避免重复点击叠加内容
  displayElement.innerHTML = "";
  for (let j = 0; j < newNumbersArray.length; j++) {
    // 这里可以用append或者innerHTML来添加，比如每个数字加个空格分隔
    displayElement.innerHTML += newNumbersArray[j] + " ";
  }
};

额外优化：实现真正的“依次显示” #

如果你的预期是数字逐个依次出现（不是一次性全部加载出来），可以用setTimeout来实现动画效果，比如：

document.getElementById("button-1").onclick = function () {
  const numbersArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  const displayElement = document.getElementById("number-container");
  displayElement.innerHTML = "";
  
  let count = 0;
  const showNumber = () => {
    if (count < 50) {
      const randomNum = numbersArray[Math.floor(Math.random() * 11)];
      displayElement.innerHTML += randomNum + " ";
      count++;
      setTimeout(showNumber, 100); // 每100毫秒显示一个数字，可调整速度
    }
  };
  
  showNumber();
};

这样点击按钮后，数字会一个接一个地弹出，更符合你说的“依次显示”的需求~

内容的提问来源于stack exchange，提问作者Michael Alexander