为什么这个简单的javascript函数无法实现预期的功能？

Question

I am trying to write a function that will make a string of random numbers appear one after the other inside an html

element. See the function below:

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

The first part of the function takes an array of numbers 0-10 and creates a new array 50 elements long made up of random numbers from the variable numbersArray. Then the function is supposed to display each number one after the other on the html page (note that I am aware this would happen so fast that you would only see the last number. I plan to later add a timer, right now I am just trying to get the basic functionality). However, when I click the button the html page, absolutely nothing happens. What am I missing?

Many thanks for your help. I am a newbie (probably quite obvious).

Answer 1

The problem is that you never called 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> 

Answer 2

You're not calling createNewArray() , maybe you're missing:

newNumbersArray = createNewArray(numbersArray)

Also, this looks weird because you're overwritting the value multiple times:

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

You could do:

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

But there is an easier way:

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

Answer 3

The issue that I found in your code is that you are defining a function called createNewArray but you never use it.

The solution should be:

createNewArray(newNumbersArray)

However, I'd recommend you to do the following:

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

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