For loop is executing on multiple divs at a time, instead of applying it one by one on div

Question

I am creating randomly fading squares on the image. They end up one by one partially revealing the image. This function was meant to hide random squares one by one but it is hiding them abnormally.

setInterval(disappearingBoxes, 500);

function disappearingBoxes() {
  for (let i = 0; i < boxes.children.length; i++) {
    i = Math.floor(Math.random() * 16).toFixed()
    if (!boxes.children[i].classList.contains('hidden') && boxes.children[i].id === i) {     
      boxes.children[i].removeAttribute('id');      
      if (boxes.children[i].getAttribute('id') === null) {
        boxes.children[i].classList.add('hidden') 
      } else {
        let newI = Number(Math.floor(Math.random() * 16).toFixed());
        boxes.children[newI].classList.add('hidden')    
      }  
    }

learner62 · Accepted Answer · 2022-12-29 06:33:26Z

0

Try This

function disappearingBoxes() {
  for (let i = 0; i < boxes.children.length; i++) {
    if (!boxes.children[i].classList.contains('hidden') && boxes.children[i].id === i) {     
      boxes.children[i].removeAttribute('id');      
      if (boxes.children[i].getAttribute('id') === null) {
        boxes.children[i].classList.add('hidden') 
      } else {
        let newI = Number(Math.floor(Math.random() * 16).toFixed());
        boxes.children[newI].classList.add('hidden')    
      }  
    }
  }
}

answered Dec 29, 2022 at 6:33

learner62

6304 gold badges12 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Khwaeesh Patel Over a year ago

this is the same as before, still squares disappearing abnormally

Collectives™ on Stack Overflow

For loop is executing on multiple divs at a time, instead of applying it one by one on div

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related