Цитирование функции в 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(); 
}