how insert an index into an array in a loop js

Question

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!

You might want to clone the array and push into the new one instead. Pushing inside the loop changes the length so the loop probably doesn't loop how you would expect. — k.tten
– k.tten, Commented Mar 1, 2022 at 15:19
@youdateme But they are not pushing into the array they are looping on. Besides, the push is happening in a callback, so is most likely not occurring until a later time. — 001
– 001, Commented Mar 1, 2022 at 15:22
document.addEventListener('load', ()=>{ Should that be img[i].addEventListener('load', ()=>{ ?? — 001
– 001, Commented Mar 1, 2022 at 15:22
You're adding a new independent "load" listener to the document for each image. Either that whole block should be wrapped in a single listener, or remove the listeners entirely, but definitely don't add a document listener for each image. — James
– James, Commented Mar 1, 2022 at 15:54

James · Accepted Answer · 2022-03-01 16:06:06Z

1

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);
})

answered Mar 1, 2022 at 16:06

James

22.4k5 gold badges29 silver badges44 bronze badges

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

6 Comments

Messali Over a year ago

thanks but is not working, the response in the concole is : main.js:13 Uncaught ReferenceError: fromLeft is not defined

James Over a year ago

Doesn't make sense since it's defined in that very function. Check for typos.

Messali Over a year ago

yes I have no more error message indeed thank you

Messali Over a year ago

the only problem is that now only the last array gets filled with all the values

James Over a year ago

Perhaps you meant window.innerWidth / 2 instead of window.scrollY / 2? Not really sure.

|

Collectives™ on Stack Overflow

how insert an index into an array in a loop js

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related