I'm trying to figure out a way to manipulate the position of an HTML element that is stored inside an array. The issue I am facing is that my code generates a new div every time a specific function is called, and this div has a class applied to it for animation purposes.
After the animated div falls down the screen, I need to randomly adjust its X position by a certain number of pixels. Below is the code snippet I have been working on:
for (i = 0; i < 1; i++) {
setInterval(function newRock(item){
let num = Math.floor(Math.random() * 1000);
let num2 = Math.floor(Math.random() * 1500);
const rocks = document.querySelector(".rocks");
const rock = document.createElement("DIV");
rocks.appendChild(rock)
rock.classList.add("rock0");
rock.classList.add("animate");
rock.style.left = `${num}px`;
rock.style.top = `${num2}px`;
rockArray.push(rock.className);
classNumber++;
},10000);
}
setInterval(() => {
console.log(rockArray)}, 10000)
});
rockArray.forEach((item) => {
item.style.left = `${num}px`;
});
setInterval(function() {
let num = Math.floor(Math.random() * 1000);
let num2 = Math.floor(Math.random() * 1000);
document.querySelector(".rock0").style.left = `${num}px`;
document.querySelector(".rock1").style.left = `${num2}px`;
}, 3000);