在Javascript中循环函数

我试图在屏幕上创建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;
 }

 }

---

for（i=0；i您正在循环内定义函数，但您应该在循环外定义函数并在循环内调用它

// 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();
}

//定义函数
函数generateSquare（）{
var parent=document.querySelector（'.squares'）；
var squareNode=document.createElement（“div”）；
squareNode.classList.add（'square'）；
parent.appendChild（squareNode）；
squareNode.style.top=getRandomInt（0400）+'px'；
squareNode.style.left=getRandomInt（0400）+'px'；
squareNode.style.background='rgb（'+getRandomInt（0255）+'、'+getRandomInt（0255）+'、'+getRandomInt（0255）+'）；
}
对于（i=0；i