Eu estou fazendo um single-player de RPG web de estilo Zelda top-down 2D em JavaScript.

Quando o jogador (camisa roxa) anda perto de um gato, ele "resgata" isso ... o que basicamente removeanimalContainer deContainerOfAnimals (removendo assim o BMP do animalContainer's do palco) e, em seguida, adicione o id desse animalContainer a umrescuedTotal_Array...

O estranho é que, na foto abaixo, eu sou capaz de resgataranimalContainer2 eentão resgataranimalContainer1... Mas se eu for deanimalContainer1 paraanimalContainer2, lança um

Uncaught TypeError: Cannot read property 'id' of undefined` error. 

...Basicamente:

Forma de trabalho: obter ID 22, em seguida, até ID 21 - >>> Uma coisa que eu noto com isso é que o nome do elemento não muda para o ID ... não tenho certeza do porquê ... então, para a maneira quebrada ... pode não ser possível nem mesmo associar o nome do elementoanimalContainer2 com um ID? Mas eu não sei como o ID e o nome poderiam ser desassociados assim.

ID in rescued array...: 22, element name: animalContainer1, rescued array length: 2, elem index pos: 0, index: 0

ID in rescued array...: 21, element name: animalContainer1, rescued array length: 2, elem index pos: 1, index: 0 

Forma quebrada - lança erro: obter ID 21, depois para ID 22

ID in rescued array...: 21, element name: animalContainer1, rescued array length: 1, elem index pos: 0, index: 0 

1. Uncaught TypeError: Cannot read property 'id' of undefined 

Fragmento de código:

        function grabIt(NPC_id, index) {
            //check if NPCid already exists in array before adding...
            if ($.inArray(ContainerOfAnimals.children[index].id, rescuedTotal_Array) == -1) {
                rescuedTotal_Array.push(ContainerOfAnimals.children[index].id);
            }
            if (rescuedTotal_Array.length == 2) {
                for (var z = 0; z < rescuedTotal_Array.length; z++) {
                    console.log("ID in rescued array...: " + rescuedTotal_Array[z] + ", \n element name: " + ContainerOfAnimals.children[index].name + ", rescued array length: " + rescuedTotal_Array.length + ",\n elem index pos: " + z + ",\n index: " + index);
                }
            }
            //when I remove the first added element to rescuedTotalArray... the 2nd element's index assumes first added element's index... (goes from 1 to 0)
            console.log(index);
            console.log("element removed: " + ContainerOfAnimals.children[index]);
            stage.update();
            ContainerOfAnimals.removeChild(ContainerOfAnimals.children[index]);
            updateHUD();
        }

Eu não tenho idéia porque a ordem em que eu armazenar elementos na matriz / removê-los do palco seria importante ...

EDIT: eu sinto que posso resolver esse problema, removendo o elemento de ContainerOfAnimals por ID do elemento em vez de por índice ... por objeto Container não oferece nenhumgetChildID() função...

então eu tentei:

    var childToRemove = document.getElementById(ContainerOfAnimals.children[index]);
    console.log(childToRemove);
    ContainerOfAnimals.removeChild(childToRemove);

console.log (childToRemove) me dánull para crianças

Mas fazendo isso:console.log(ContainerOfAnimals.children[index].id); me dá id21, qual é o id correto ...