How to loop querySelectorAll in an animation function?

Question

I am trying to apply animation to all of the images created in a for loop, but none of the images created in the for loop are showing any animation, I have tried in multiple ways such as using forEach and a regular for loop. Essentially, what I want is to make it so the 10 images created prior in a for loop can have the same animation as the first image that is being animated across the screen and work like the first image. Please help, full code is linked here:

https://code.sololearn.com/Wwdw59oenFqB

const fps = 10;

const cats = [];
for (i = 0; i < 10; i++) {
  var img = document.createElement("img");
  img.setAttribute("src", "data:image/jpeg;base64,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");
  img.className = "catSwarm"
  img.addEventListener('click', function handleClick(event) {
    change();
    clickCounter();


  });
  img.addEventListener('load', function handleClick(event) {

  })

  document.body.appendChild(img);
  cats.push(img)

}

let image = document.querySelector("img");
let angle = Math.PI / 2;
//store the previous time the animate function last fired
let prevTimeArg;

function animate(currentTimeParam) {


  if (prevTimeArg != null) {
    angle += (currentTimeParam - prevTimeArg) * 0.004;
  }
  // Setting the previous time to the time the function currently fires
  prevTimeArg = currentTimeParam;
  image.style.top = (Math.tan(angle) * 150) + "px";
  image.style.left = (Math.tan(angle) * 150) + "px";
  image.style.height = (Math.cos(angle) * 1000) + "px";
  image.style.width = (Math.cos(angle) * 1000) + "px";


  setTimeout(() => {
    requestAnimationFrame(currentTime => animate(currentTime));
  }, 0 / fps)
}

for (i = 0; i < cats.length; i++) {
  window.requestAnimationFrame(animate);
}

Thank you in advance.

Answer 1

I would delegate, if the idea is to animate the cat on click

You can make 3 global vars to use in the animation

const fps = 10;
const div = document.getElementById("catsContainer");
const cats = [];
for (let i = 0; i < 10; i++) {
  let img = document.createElement("img");
  img.setAttribute("src", "data:image/jpeg;base64,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");
  img.className = "catSwarm"
  div.appendChild(img);
  cats.push(img)
}
let image;
let prevTimeArg;
let angle;
div.addEventListener('click', function handleClick(e) {



  image = e.target;
  angle = Math.PI / 2;
  //store the previous time the animate function last fired
  window.requestAnimationFrame(animate);
})

function animate(currentTimeParam) {


  if (prevTimeArg != null) {
    angle += (currentTimeParam - prevTimeArg) * 0.004;
  }
  // Setting the previous time to the time the function currently fires
  prevTimeArg = currentTimeParam;
  image.style.top = (Math.tan(angle) * 150) + "px";
  image.style.left = (Math.tan(angle) * 150) + "px";
  image.style.height = (Math.cos(angle) * 1000) + "px";
  image.style.width = (Math.cos(angle) * 1000) + "px";


  setTimeout(() => {
    requestAnimationFrame(currentTime => animate(currentTime));
  }, 0 / fps)
}

<div id="catsContainer"></div>

Answer 2

You can try this solution, inside the function animate, you should query your images and apply the animation on each image:

function animate(currentTimeParam) {

    const images = document.getElementsByClassName('catSwarm')// <=== This is what you need

    for (var i = 0; i < images.length; i++) {
        const image = images[i]

        if (prevTimeArg != null) {
            angle += (currentTimeParam - prevTimeArg) * 0.004;
        }
        // Setting the previous time to the time the function currently fires
        prevTimeArg = currentTimeParam;
        image.style.top = (Math.tan(angle) * 150) + "px";
        image.style.left = (Math.tan(angle) * 150) + "px";
        image.style.height = (Math.cos(angle) * 1000) + "px";
        image.style.width = (Math.cos(angle) * 1000) + "px";


        setTimeout(() => {
            requestAnimationFrame(currentTime => animate(currentTime));
        }, 0 / fps)
    }

}

window.requestAnimationFrame(animate);