Why is this secret trapdoor triggering on every nested click?
<div id="trapdoor" style="padding: 24px; background: #332;">
<button id="latch">Unlock Hatch</button>
<span id="status">Locked</span>
</div>
<script>
const trapdoor = document.querySelector("#trapdoor");
const status = document.querySelector("#status");
trapdoor.addEventListener("click", (e) => {
if (e.target.id === "trapdoor") {
status.textContent = "Trapdoor sprung!";
}
}, true);
</script>
Reply with what is broken and how you would fix it.
