Search code examples
javascripteaseljscreatejs

Container.id vs getElementById - weird error

I have a function for my rpg game that simulates grabbing an element in a create js container object by removing it from the container (thereby removing it from the stage) when the player gets near it.

function grabIt(NPC_id, index) {
    console.log(ContainerOfAnimals.children[index].id);
    var childToRemove = document.getElementById(ContainerOfAnimals.children[index]);
    console.log(childToRemove);
    ContainerOfAnimals.removeChild(childToRemove);
}

The first console.log gives correct id of child: 21

But when I want to grab the child container object using getElementById, the child is null.

Why is this?

Solution

  • EaselJS elements have an id property but there aren't DOM elements. They're plain JavaScript objects (instances of a subclass of DisplayObject). And they're not added to the DOM tree.

    Therefore, you can't get them by using document.getElementById.

    To remove your element, simply do 

     ContainerOfAnimals.removeChild(ContainerOfAnimals.children[index]);

    or (faster) 

     ContainerOfAnimals.removeChildAt(index);