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

在Javascript中循环一个函数

1 个答案: