Why doesn't it work?

Question

I'm trying to do an animation through which the image chosen has to move to the center, while the other two should disappear, but on this last thing I'm stuck
https://code.sololearn.com/WGMg058qqwXL/?ref=app

Answer 1

The 'opponent' variable is not an array. It is a nodeList. It doesn't have splice method. And removing elements using splice method doesn't remove the elements from DOM. Use a forEach method. I don't think map is also a method for NodeList.

But you can convert a nodelist into an array using Array.from(nodelist) method.

Answer 2

It just looks like an array.. But you don't have many methods for nodelist. QuerySelector and other DOM Methods return node list. It is an HTML collection Object. You can just convert them to an array using array.from(). Convert them and use slice instead of splice. Then iterating through the sliced array, assign display style to none for every element

Answer 3

Sorry, what's the difference between an array and a nodelist? Could you guide me/write some code to understand how to make it work?

Answer 4

I've found a simplier way to make them disappear through a for loop. Anyway your advice opened me the road to come to this solution so thanks a lot for the help. I made the code public, give it a look if you want