我正在尝试为我正在开发的游戏制作弹出窗口。按钮出现,但弹出窗口不起作用

问题描述 投票:0回答:0

`我正在为班级制作游戏。我想让一个老式的网络选择你自己的冒险类型游戏,我记得多年前玩过。所以如果你走错了路,你可能会死。所以我正在处理其中一个死胡同,我希望在它们失败时出现一个弹出窗口。该按钮有效,我知道弹出窗口是设计好的。我只是为了我的生活无法弄清楚为什么它不起作用。我看了几个视频,希望这是一个简单的错误,但没有任何帮助。

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> &nbsp;</div>
</div>
</div>
<div>
<button data-youdied-target="#youdied">Grab Your Brother's 
coat</button>
</div>

我真的不能说我试过什么。我试过四处移动并更改我的代码。当我说我是新来的。我没开玩笑

javascript html css syntax popup
© www.soinside.com 2019 - 2024. All rights reserved.