I want to make two tables to identify the position of each image before an animation. I tried several solutions I think the most logical would be a .push() but it doesn't work. Here is a code snippet:
const img = document.querySelectorAll('.myClass img')
let fromRight = []
let fromLeft = []
for (let i = 0; i < img.length; i++) {
document.addEventListener('load', ()=>{
if (img[i].getBoundingClientRect().x < (window.scrollY/2)) {
fromLeft.push(i)
}
else if (img[i].getBoundingClientRect().x > (window.scrollY/2)) {
fromRight.push(i)
}
})
console.log('left :', fromLeft);
console.log('right :', fromRight);
}I also tried:
Array.prototype.push.apply(fromLeft, i)And :
fromLeft.concat(i)Please I need help!
Try wrapping the whole code inside a single listener
document.addEventListener('load', ()=>{
const img = document.querySelectorAll('.myClass img')
let fromRight = []
let fromLeft = []
for (let i = 0; i < img.length; i++) {
if (img[i].getBoundingClientRect().x < (window.scrollY/2)) {
fromLeft.push(i)
}
else if (img[i].getBoundingClientRect().x > (window.scrollY/2)) {
fromRight.push(i)
}
}
console.log('left :', fromLeft);
console.log('right :', fromRight);
})