I have set up an event listener on an HTML container, and when the user clicks on the play again button, the code inside the 'if' statement should be executed. However, nothing happens when clicking on the play again button and no logs are output to the console. I've tried different methods such as checking if the element has a particular class name.
Here is the relevant snippet of HTML:
<div class="play-again-btn">
<input type="button" class="play-btn" value="PLAY AGAIN">
</div>
This is where the event listener is attached to the container:
document.querySelector(DOMstrings.endContainer).addEventListener("click", playerCtrl.playAgain);
Below is the playAgain method:
playAgain: (event) => {
let finishedPlayer, parentEl;
console.log(event.target);
//1. Perform actions only if correct button is clicked
if (event.target.nodeName == "input") {
//2. Remove existing character from finish line
finishedPlayer = document.querySelector(DOMstrings.finishBox);
finishedPlayer.removeChild(finishedPlayer.childNodes[0]);
//3. Display character select pop up
document.querySelector(DOMstrings.usersInput).style.visibility = "unset";
//4. Remove leaderboard pop up
parentEl = document.querySelector(DOMstrings.endContainer);
parentEl.removeChild(parentEl.childNodes[1]);
}
},