Creating a new div every 3 seconds-CodePudding

I want divs with circles to be created and appear on my page

I made a create function where I randomly choose a color and add a circle class which gives the shape of a circle

But now I have them all created together, and the quantity is what I indicate

How can I make these divs create themselves, let's say every 3 seconds, and the number of them on the page is almost unlimited?

function createDiv(id, color) {
  let div = document.createElement('div');
  div.setAttribute('id', id);
  if (color === undefined) {
    let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547'];
    div.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
  }
  else {
   div.style.backgroundColor = color; 
  }
  div.classList.add("circle");
  document.body.appendChild(div);
}
    
createDiv('first');
createDiv('second');
createDiv('third');
createDiv('fourth');
createDiv('fifth');
createDiv('sixth');
createDiv('seventh');
createDiv('eighth');
createDiv('ninth');
createDiv('tenth');
createDiv('eleventh');
createDiv('twelfth');

div {
  display: inline-block;
  margin: 20px;
}

.circle {
  clip-path: circle(50%);
  height: 50px;
  width: 50px;
  margin: 20px;
}

CodePudding user response：

You can leverage setInterval to run the script every three seconds. Since your id is required, the function I'm running every three seconds below also iterates an i var to leverage and keep unique ids:

function createDiv(id, color) {
  let div = document.createElement('div');
  div.setAttribute('id', id);
  if (color === undefined) {
    let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547'];
    div.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
  }
  else {
   div.style.backgroundColor = color; 
  }
  div.classList.add("circle");
  document.body.appendChild(div);
}
    
let i = 0;

const threeSeconds = 3000;

setInterval(() => {
  i  = 1;
  createDiv(`div-${i}`)
}, threeSeconds);

div {
  display: inline-block;
  margin: 20px;
}

.circle {
  clip-path: circle(50%);
  height: 50px;
  width: 50px;
  margin: 20px;
}

CodePudding user response：

use setInterval

function createDiv(id, color) {
  let div = document.createElement('div');
  div.setAttribute('id', id);
  if (color === undefined) {
    let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547'];
    div.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
  }
  else {
   div.style.backgroundColor = color; 
  }
  div.classList.add("circle");
  document.body.appendChild(div);
}

setInterval("wrapper()", 3000);

let cnt = 0;
function wrapper(){
  let id = 'id'   cnt
  createDiv(id)
}

div {
  display: inline-block;
  margin: 20px;
}

.circle {
  clip-path: circle(50%);
  height: 50px;
  width: 50px;
  margin: 20px;
}

CodePudding user response：

Just add a timeout function, you may need a way to opt out as they will be created indefinitely as long as the page is open

function createDiv(id, color) {
  let div = document.createElement('div');
  div.setAttribute('id', id);
  if (color === undefined) {
    let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547'];
    div.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
  }
  else {
   div.style.backgroundColor = color; 
  }
  div.classList.add("circle");
  document.body.appendChild(div);
}

function ontimeOut(){
    createDiv("div-"   Math.random());
    setTimeout(ontimeOut, 3000);
}
ontimeOut();

div {
  display: inline-block;
  margin: 20px;
}

.circle {
  clip-path: circle(50%);
  height: 50px;
  width: 50px;
  margin: 20px;
}

CodePudding user response：

You can do it with only one line of code in your JavaScript file, by using setIterval timer, and Date.now() to generate unique id each time:

setInterval(() => createDiv(Date.now()), 3000);

Working example:

function createDiv(id, color) {
  let div = document.createElement('div');
  div.setAttribute('id', id);
  if (color === undefined) {
    let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547'];
    div.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
  }
  else {
   div.style.backgroundColor = color; 
  }
  div.classList.add("circle");
  document.body.appendChild(div);
}

setInterval(() => createDiv(Date.now()), 3000);

div {
  display: inline-block;
  margin: 20px;
}

.circle {
  clip-path: circle(50%);
  height: 50px;
  width: 50px;
  margin: 20px;
}

CodePudding user response：

You can use setInterval as mentioned, but you need to make sure to clear the interval as well clearInterval(createWithTimer); otherwise you will end up with an infinite loop.

You can also probably set the background as follow: div.style.backgroundColor = color || colors[randomNumber];

function createDiv(id, color) {
  let div = document.createElement('div');
  div.setAttribute('id', id);
  
  let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547'],
      randomNumber = Math.floor(Math.random() * colors.length);

  div.style.backgroundColor = color || colors[randomNumber];
    
  div.classList.add("circle");
  document.body.appendChild(div);
  
}

let counter = 0;
const interValTimer = 500, idArray = ['first','second','third','fourth', 'fifth','sixth','seventh','eigth'];

let createWithTimer = setInterval(()=>{
  if(counter >= idArray.length)
    clearInterval(createWithTimer);
  else 
    createDiv(idArray[counter]);
    
    counter  ;

}, interValTimer);

div {
  display: inline-block;
  margin: 20px;
}

.circle {
  clip-path: circle(50%);
  height: 50px;
  width: 50px;
  margin: 20px;
}