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个元素，其长度由变量numbersArray中的随机数组成。然后该函数假设在html页面上显示每个数字一个接一个（请注意，我知道这会发生得如此之快，以至于你只能看到最后一个数字。我打算稍后添加一个计时器，现在我只是想获得基本功能）。但是，当我点击html页面的按钮时，绝对没有任何反应。我错过了什么？

非常感谢你的帮助。我是新手（可能很明显）。

Answer 1

问题是您从未致电createNewArray

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你没有打电话给createNewArray()，也许你已经失踪了：

newNumbersArray = createNewArray(numbersArray)

此外，这看起来很奇怪，因为您多次覆盖该值：

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

你可以这样做：

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

但有一种更简单的方法：

document.getElementById("number-display").innerHTML = newNumbersArray[j].join(',');

Answer 3

我在您的代码中发现的问题是您定义了一个名为createNewArray的函数，但您从未使用它。

解决方案应该是：

createNewArray(newNumbersArray)

但是，我建议您执行以下操作：

＆＃13;

document.getElementById("button-1").onclick = function () {
  var newNumbersArray;

  function createNewArray () {
    // instead of passing a parameter which will be modified, 
    // you can create a variable inside your function and return it
    var array = [];
    for (i=0;i<50;i++) {
      // array.push(numbersArray[Math.floor(Math.random()*11)])
      // the line above is practically the same as the line bellow
      array.push(Math.floor(Math.random()*11));
    }
    return array;
  }
  
  // so you can use it in this way
  newNumbersArray = createNewArray();

  for (j = 0; j < newNumbersArray.length; j++) {
    document.getElementById("number-display").innerHTML = newNumbersArray[j];
  }
}

＆＃13;

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

＆＃13;

为什么这个简单的javascript函数不会做它应该做的事情？

3 个答案: