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