How to generate red colour automatically in each div tag of 3*3 block using setInterval Using JavaScript? how colour is counting?

Question

This is my output and I want this red color is generated automatically by setInterval:

Answer 1

I didn't really understand your question, but I have done something anyways.

const gridItem1 = document.querySelector('.grid-item-1');

setInterval(() => {
  gridItem1.style.backgroundColor = 'red';
}, 2000)

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  grid-template-rows: repeat(3, 80px);
}

.grid-item {
  width: 80px;
  height: 80px;
  border: 1px solid red;
}

<div class="grid-container">
  <div class="grid-item grid-item-1"></div>
  <div class="grid-item grid-item-2"></div>
  <div class="grid-item grid-item-3"></div>
  <div class="grid-item grid-item-4"></div>
  <div class="grid-item grid-item-5"></div>
  <div class="grid-item grid-item-6"></div>
  <div class="grid-item grid-item-7"></div>
  <div class="grid-item grid-item-8"></div>
  <div class="grid-item grid-item-9"></div>
</div>

JavaScript simply takes the first grid item (grid-item-1) and changes its background-color to red.

One thing that needs to be noticed is here the JavaScript is adding inline style, which is not always a good idea.

Other thing you can do is to have a class and then add the class after a set amount of time.

Here's an example:

const gridItem1 = document.querySelector('.grid-item-1');

setInterval(() => {
  gridItem1.classList.add('red-div')
}, 2000)

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
}

.grid-item {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

.red-div {
  background: red
}

<div class="grid-container">
  <div class="grid-item grid-item-1"></div>
  <div class="grid-item grid-item-2"></div>
  <div class="grid-item grid-item-3"></div>
  <div class="grid-item grid-item-4"></div>
  <div class="grid-item grid-item-5"></div>
  <div class="grid-item grid-item-6"></div>
  <div class="grid-item grid-item-7"></div>
  <div class="grid-item grid-item-8"></div>
  <div class="grid-item grid-item-9"></div>
</div>

Thank You!

Answer 2

i think you need to use timeout before the start of the function in am not sure but i have this

let gridItem = document.querySelectorAll('.grid-item');
const btn = document.querySelector('#start');
btn.addEventListener('click',()=>{
  setTimeout(()=>{
    let rand = getRandomInt(0,gridItem.length);
      gridItem[rand].classList.add('red')
      gridItem = document.querySelectorAll('.grid-item:not(.red)');
  },1000)
})


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

body {
  display: flex;
  justify-content: center;
  align-items: center;
}
.red{
  background-color: red;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  grid-template-rows: repeat(3, 80px);
}

.grid-item {
  width: 80px;
  height: 80px;
  border: 1px solid red;
}

<div class="grid-container">
  <div class="grid-item grid-item-1"></div>
  <div class="grid-item grid-item-2"></div>
  <div class="grid-item grid-item-3"></div>
  <div class="grid-item grid-item-4"></div>
  <div class="grid-item grid-item-5"></div>
  <div class="grid-item grid-item-6"></div>
  <div class="grid-item grid-item-7"></div>
  <div class="grid-item grid-item-8"></div>
  <div class="grid-item grid-item-9"></div>
</div>
<button id="start">start</button>

interval use

let gridItem = document.querySelectorAll('.grid-item');
const btn = document.querySelector('#start');
btn.addEventListener('click',()=>{
  let interval = setInterval(()=>{
    let rand = getRandomInt(0,gridItem.length);
      gridItem[rand].classList.add('red')
      gridItem = document.querySelectorAll('.grid-item:not(.red)');
      if(!gridItem.length){
        clearInterval(interval)
      }
  },1000)
})


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

body {
  display: flex;
  justify-content: center;
  align-items: center;
}
.red{
  background-color: red;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  grid-template-rows: repeat(3, 80px);
}

.grid-item {
  width: 80px;
  height: 80px;
  border: 1px solid red;
}

<div class="grid-container">
  <div class="grid-item grid-item-1"></div>
  <div class="grid-item grid-item-2"></div>
  <div class="grid-item grid-item-3"></div>
  <div class="grid-item grid-item-4"></div>
  <div class="grid-item grid-item-5"></div>
  <div class="grid-item grid-item-6"></div>
  <div class="grid-item grid-item-7"></div>
  <div class="grid-item grid-item-8"></div>
  <div class="grid-item grid-item-9"></div>
</div>
<button id="start">start</button>