javascript - 在 Javascript 中循环函数

Question

我正在尝试在屏幕上创建 20 个盒子。我认为 for 循环会起作用。我正在使用 javascript，我不明白为什么它不起作用。我知道我的函数可以工作，只是不确定如何让循环工作。

for (i=0; i<20; i++){
function generateSquare(){
var parent = document.querySelector('.squares');
var squareNode = document.createElement("div");
squareNode.classList.add('square');
parent.appendChild(squareNode);
squareNode.style.top = getRandomInt(0, 400) +'px';
squareNode.style.left = getRandomInt(0, 400) +'px';
squareNode.style.background = 'rgb(' + getRandomInt(0, 255) + ',' + getRandomInt(0, 255) + ',' + getRandomInt(0, 255) + ')';

}

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
 }

 }

Answer 1

您正在循环内定义函数，但您应该在循环外定义它并在循环内调用它。

// define the function
function generateSquare(){
    var parent = document.querySelector('.squares');
    var squareNode = document.createElement("div");
    squareNode.classList.add('square');
    parent.appendChild(squareNode);
    squareNode.style.top = getRandomInt(0, 400) +'px';
    squareNode.style.left = getRandomInt(0, 400) +'px';
    squareNode.style.background = 'rgb(' + getRandomInt(0, 255) + ',' + getRandomInt(0, 255) + ',' + getRandomInt(0, 255) + ')';
}

for (i=0; i<20; i++){
    // call the function
    generateSquare();
}