`I am currently working on a game project for my class, aiming to create a nostalgic web-based choose-your-own-adventure game similar to the ones I enjoyed playing years ago. I want the experience to be challenging, where making the wrong decisions could lead to death in the game. While implementing one of these dead ends, I encountered an issue with the pop-up feature not functioning as expected. Despite verifying that the button and design elements are correctly set up, I cannot seem to pinpoint why it is failing to work. I have referred to several tutorials and resources in hopes of resolving this issue, but so far, nothing has provided a solution.
const openyoudiedbuttons = document.querySelectorAll("[data-youdied-target]")
//const overlay = document.getElementById("overlay")
openyoudiedbuttons.forEach(button => {
button.addEventListener("click", () => {
const youdied =
document.querySelector(button.dataset.youdiedTarget)
openyoudied(youdied)
})
})
//overlay.addEventListener("click", () => {
// const youdied = document.querySelectorAll(".youdied.active")
//})
function openyoudied(youdied) {
if (youdied == null) return
youdied.classlist.add("active")
overlay.classlist.add("active")
}.dead {color: #ca0d0d;
font-size: xx-large;
}
.youdied{
width: 300px;
top: 50%;
left: 50%;
background:black;
color: var(--red);
position: fixed;
transform: translate(-50%, -50%) scale(0);
transition: 200ms ease-in-out;
border: 1px solid rgb(134, 29, 29);
border-radius: 10px;
z-index: 10;
width: 400px
}
.youdied.active {transform: translate(-50%, -50%) scale(1);
}
.youdied-header{
padding: 10px, 15px;
font-weight: bold;
display: flex;
align-items: center;
border-bottom: 1px solid var(--red);
}
.youdied-header .title{
font-size: 1.25rem;
font-weight: bold;
}
#overlay{
position: fixed;
opacity: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: 200ms ease-in-out;
background-color: black 0, 0 ,0 .7;
pointer-events: none;
}
#overlay.active{
pointer-events: all;
opacity: 1;
}<div class="dead">
<h1>The Pond</h1>
<img src="pond.webp"
height="300" width="600" ></div>
<div class="youdied" id="youdied">
<div class="youdied">You Died<br>
As you reached for the coat. <br>
A pale hand grabs you and<br>
pulls you under the water.
<img src="ghosthand.jpg"
height="150" width="250" >
<div class="box-center">
<a href="final.html">Try Again?</a> </div>
</div>
</div>
<div>
<button data-youdied-target="#youdied">Grab Your Brother's
coat</button>
</div>I can not really say what I have tried. I have tried moving things around and making changes to my code. WHen I say I am new. I am not joking