Event trigger for when child is added to element

Question

I am creating a simple maze game. When the user reaches the finish line, I want an event to be triggered so that the timer is stopped and the leader board is displayed etc. The way the maze works is that a child element (an image) is added to each of the maze boxes when the user clicks the keyboard directional arrows like so:

<div class="box box36" id="box-36">
    <img class="character-img character-box" src="' + chosenCharacter + '">
</div>

When moving position, the image child from the previous players position is then removed. Thus creating the animation of the character moving around the maze.

The box above (box-36) is the finish line within the maze. I am thinking that I need to use some sort of event listener for this but having looked at the full list of event listeners, I can't figure out which one to use or, if this is indeed the correct way to go about it.

I have tried creating a simple if statement to test whether box-36 contains a child which has the image src but the result of the this is that nothing happens when the user reaches the finish line (nothing is printed to the console on test). I have also tried testing whether the current player position is equal to the finish line position. Still nothing happens and nothing is printed to the console. I will include the JS code below.

Here is the Javascript code:

 playerFinished: (currentPos) => {
            if (currentPos === "36" || currentPos === 36) {
                console.log("finished");
}

Here is where it's called:

playerCtrl.playerFinished(currentPos);

Here is where currentPos comes from:

    currentPos = naviCtrl.currentPosition(DOMstrings.boxes, DOMstrings);

Here is where currentPostion comes from:

currentPosition: (boxes) => {
            let playerPosition = document.querySelector(DOMstrings.boxOne);
            let res = null;
            boxes.forEach((curr) => {
                if (typeof curr.children[0] !== 'undefined' && curr.children[0]) {
                    splitID = curr.id.split('-');
                    res = splitID[1];
                    return;
                }
            });
            return res;

The currentPosition method above creates an array of the boxes in my html code and then tests which one of them has a child element (the image of the character). It then takes that ID and splits it leaving just the number of the box (i.e 36)

Answer 1

So it turns out the reason why the condition wasn't being met on the playerFinished function is because the method was being immediately when the page was loaded so therefore, obviously the condition wasn't being met as the players position was not at the finish position (seems very obvious in hindsight).

I have now added the playerFinished function to the directional key event listeners so that when the user clicks a direction keyboard key, if the player position is at the finish position, the playerFinished function will be called.

Here is the code:

playerFinished: (currentPos) => {
            if (document.querySelector(DOMstrings.characterImg).parentNode.id === 36 || document.querySelector(DOMstrings.characterImg).parentNode.id === "box-36") {

                console.log("finished");
            }
        }, 


document.addEventListener("keydown", moveCharacter = (e) => {
                    let currentPos = naviCtrl.currentPosition(DOMstrings.boxes, DOMstrings);
                    document.querySelector(DOMstrings.timer).innerHTML = "";

                    const key_code = e.which || e.keyCode;
                    switch (key_code) {
                        case 37: //left arrow key
                            naviCtrl.moveLeft(currentPos, chosenCharacter);
                            playerCtrl.playerFinished();
                            break;
                        case 38: //Up arrow key
                            naviCtrl.moveUp(currentPos, chosenCharacter);
                            playerCtrl.playerFinished();
                            break;
                        case 39: //right arrow key
                            naviCtrl.moveRight(currentPos, chosenCharacter);
                            playerCtrl.playerFinished();
                            break;
                        case 40: //down arrow key
                            naviCtrl.moveDown(currentPos, chosenCharacter);
                            playerCtrl.playerFinished();
                            break;
                    }
                });