HTML按钮不响应
我正在创建一个文本冒险游戏，其中涉及使用按钮更改文本的使用。直到几分钟前，这一直在工作，现在已经停止了。这是代码：
<button type = "button" onclick = "Change_Text(id)" name = "options" id ="begin_game">Begin.</button>
它应该直接与此相对应：
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Abandoned Hotel - Floor 1</title>
<meta charset = "utf-8">
<meta name="viewport" content ="width=device-width, initial-scale=1">
<style>
@import url('https://fonts.googleapis.com/css2?family=Nosifer&display=swap');
* {
box-sizing: border-box;
}
body{
background-color: black;
}
#header{
height: 50px;
font-size: 2em;
text-align: center;
color: purple;
font-family: 'Nosifer', cursive;
}
#wrapper{
background-color: lightslategray;
width: 100%;
margin-top: 50px;
display: table;
border: solid rgb(163, 21, 21) 5px;
padding:200px;
}
img{
height: 10%;
width: 90%;
}
.Pheader{
font-family: 'Nosifer', cursive;
}
#h1{
font-size: 2em;
}
p{
font-size: 1.2em;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 20px;
height: 3-0px; /* Should be removed. Only for demonstration */
}
.Gridrow{
grid-row: 1/3;
grid-column: 2/3;
width:50%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>
<script>
function safeCombo(){
var combo = prompt('ENTER SAFE CODE');
if(combo == '1922'){
SafeOpened = true;
alert("Safe Opened!");
}
else{
alert("This is not the correct combination.")
}
}
function keyObtained(){
let nar = document.getElementById('narrative')
if(SafeOpened == true){
document.getElementById('melt_ice').removeAttribute('hidden');
}
}
function ElevatorValidation(){
let nar = document.getElementById('narrative')
if(KeyMelted = true){
nar.innerHTML = "You stab the keyhole with the key and turn it. The screeching metal sends a shiver up your spine, however the elevator is now open.";
}
}
let HonorsRoomFirstTime = false;
let StorageRoomFirstTime = false;
let LoungeRoomFirstTime = false;
let SafeOpened = false;
let KeyMelted = false;
let SafeCombo = document.getElementById('SafeCombo');
let SafeCorrectCombo = '1922';
function Change_Text(myNar){
let option1 = document.getElementById("begin_game");
let option2 = document.getElementById("honors_room");
let option3 = document.getElementById("storage_room");
let option4 = document.getElementById("lounge_room");
let option5 = document.getElementById("read_plaque");
let option6 = document.getElementById("elevator");
let nar = document.getElementById("narrative");
let room = document.getElementById("roomHeader");
switch(myNar){
case 'begin_game':
room.innerHTML = "<h2>Floor One</h2>"
nar.innerHTML = "You stand in the Corridor Alone. This is clearly a puzzle. To which room will you travel first?"
document.getElementById('begin_game').setAttribute('hidden','hidden');
document.getElementById("honors_room").removeAttribute('hidden');
document.getElementById("lounge_room").removeAttribute('hidden');
document.getElementById("storage_room").removeAttribute('hidden');
var img = document.getElementById('image');
img.src = "Images/CreepyHallway.jpg";
break;
case 'honors_room':
room.innerHTML = "<h2>The Honours Room</h2>"
nar.innerHTML = "You enter the Honours Room. The dust nearly suffocates you and it makes it impossible to see beyond a grey haze."
nar.innerHTML += "Nearby there seems to be a wooden plaque. Other than that, there seems to be nothing more to see."
nar.innerHTML += "<br><span style = 'color:red'>Could this plaque be helpful to me?</span>"
document.getElementById('lounge_room').removeAttribute('hidden');
document.getElementById('storage_room').removeAttribute('hidden');
document.getElementById('read_plaque').removeAttribute('hidden');
document.getElementById('honors_room').setAttribute('hidden','hidden');
document.getElementById('open_safe').setAttribute('hidden','hidden');
document.getElementById('melt_ice').setAttribute('hidden','hidden');
var img = document.getElementById('image');
img.src = "Images/CreepyHonoursRoom.JPG";
break;
case 'storage_room':
room.innerHTML = "<h2>The Storage Room</h2>";
nar.innerHTML = "You enter the Storage Room. You're shocked to discover what's in there...Cages upon cages, stacked to the roof."
nar.innerHTML += "And the cages contain...fresh corpses. The smell violates your senses and you feel extremely nauseous."
nar.innerHTML += "<span style = 'color:red'>But there is a safe nearby...You could attempt to open it.</span>"
document.getElementById('storage_room').setAttribute('hidden','hidden');
document.getElementById('honors_room').removeAttribute('hidden');
document.getElementById('read_plaque').setAttribute('hidden','hidden');
document.getElementById('melt_ice').setAttribute('hidden','hidden');
document.getElementById('open_safe').removeAttribute('hidden');
var img = document.getElementById('image');
img.src = "Images/CreepyStorageRoom.JPG"
break;
case 'lounge_room':
room.innerHTML = "<h2>The Lounge Room</h2>"
nar.innerHTML = "You enter the Lounge Room. You're surprised. Compared to the rest of the building, this room seems...eerily oversanitised. "
nar.innerHTML += "It seems to resemble that of a hospital which how oversanitised it appears. <span style='color: red'> In front of you there is a fireplace which..."
nar.innerHTML += "Is lit?? </span> There seems to be something greater happening behind the scenes."
document.getElementById('honors_room').removeAttribute('hidden');
document.getElementById('storage_room').removeAttribute('hidden');
document.getElementById('open_safe').setAttribute('hidden','hidden');
document.getElementById('lounge_room').setAttribute('hidden','hidden');
document.getElementById('read_plaque').setAttribute('hidden','hidden');
keyObtained();
var img = document.getElementById('image');
img.src = "Images/CreepyLoungeRoom.jpg";
break;
case 'read_plaque':
nar.innerHTML = "You dust off the Plaque. The dust slithers up your nostrils and strangles your lungs."
nar.innerHTML += "The Plaque has clearly been defiled. Some of the Characters are red, however, <span style = 'color:red'>it looks rather specific: </span>";
nar.innerHTML +="<br>"
nar.innerHTML +="<br>"
nar.innerHTML += "<br><span style ='font:20px'><b>ADAM CUSHNAHAN.......<span style='color:red'>1</span>989</span>"
nar.innerHTML += "<br><span style ='font:20px'><b>GEMMA MORRIS.............199<span style='color:red'>9</span></span>"
nar.innerHTML += "<br><span style ='font:20px'><b>NOMA MSONZA...............<span style='color:red'>2</span>003"
nar.innerHTML += "<br><span style ='font:20px'><b>YOU.....................................202<span style='color:red'>2</span></span>"
document.getElementById('SafeCombo').setAttribute('hidden','hidden');
document.getElementById('read_plaque').setAttribute('hidden','hidden');
break;
case 'open_safe':
nar.innerHTML = "The Safe seems to take a four digit combination. Is there any clues around?<span style='color:red;'> Or perhaps, in another room? </span>";
safeCombo();
var img = document.getElementById('image');
img.src = "Images/CreepySafe.jpg"
break;
case 'melt_ice':
nar.innerHTML = "A ghostly puff of steam arises as you melt the ice off the key. <span style = 'color:red'>Finally, it seems that it's usable. You make your way to the Elevator.</span>"
document.getElementById('elevator').removeAttribute('hidden');
document.getElementById('melt_ice').setAttribute('hidden','hidden');
document.getElementById('honors_room').setAttribute('hidden','hidden');
document.getElementById('storage_room').setAttribute('hidden','hidden');
break;
case 'elevator':
room.innerHTML = "<h2>The elevator</h2>";
nar.innerHTML = "You stab the key hole with the key in a desperate attempt to create space between you and whatever is hunting you. You quickly slide into the elevator as it ascends to the next floor.";
document.getElementById('next_floor').removeAttribute('hidden');
document.getElementById('elevator').setAttribute('hidden','hidden');
var img = document.getElementById('image');
img.src = "Images/CreepyElevator.jpg";
break;
case 'next_floor':
//CODE FOR NEXT PAGE HERE
break;
}
}
</script>
</head>
<body>
<div id = "header">
<h2>Abandoned Hotel</h2>
</div>
<div id = "wrapper">
<div class="column">
<span id="roomHeader "><h2>Floor 1 - The Awakening</h2></span>
<img id="image" src = "Images/CreepyHallway.jpg">
</div>
<div class="column">
<span>
<p><span id="narrative">Expecting to reach the roof, the elevator instead comes to a halt at floor 1. You press the top floor's button impatiently. No luck. <br>
You step off the elevator entering floor one when the elevator firmly shuts behind you. Any closer to it and you may have lost an arm. The lights spot you,
and suddenly come alive.
At the other side of this dimly lit, dirty corridor, you spot another elevator. This feels like a death trap, you thought to yourself.<br>
But there was no time to wait, as banging came from the door you just left. Something is trying to enter.<br>
And then it stopped.
You can hear breathing coming from the other side. Coarse, heavy, breathing.
The intercom then sprang alive.<br>
<span style = "color: red">60 Seconds Remaining!</span><br>
You knew you mustn't waste any time.</p>
</span>
<div class="Gridrow">
<button type = "button" onclick = "Change_Text(id)" name = "options" id ="begin_game">Begin.</button>
<button type = "button" hidden onclick= "Change_Text(id)" name = "options" id = "storage_room">Storage Room</button>
<button type = "button" hidden onclick = "Change_Text(id)" name = "options" id = "open_safe">Open Safe</button>
<button type = "button" hidden onclick = "Change_Text(id)" name = "options" id = "honors_room">Honours Room</button>
<button type = "button" hidden onclick = "Change_Text(id)" name = "options" id = "lounge_room">Lounge Room</button>
<button type = "button" hidden onclick = "Change_Text(id)" name = "options" id = "read_plaque">Read Plaque</button>
<button type = "button" hidden onclick = "Change_Text(id)" name = "options" id = "melt_ice">Use the fire to melt the ice</button>
<button type = "button" hidden onclick = "Change_Text(id)" name = "options" id = "elevator">Open elevator</button>
<button type = "button" hidden onclick = "Change_Text(id)" name = "options" id = "next_floor">Proceed to next Floor</button>
<button type = "button" hidden onclick = "Change_Text(id)" name = "options" id="opening_safe">Try to Open Safe</button>
</div>
</div>
</div>
</body>
</html>
但是，它拒绝工作。 请帮忙！
I'm creating a text adventure game that involves the use of buttons changing text. This was working up until a few minutes ago and now it has stopped. Here is the code:
<button type = "button" onclick = "Change_Text(id)" name = "options" id ="begin_game">Begin.</button>
which should directly correspond to this:
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Abandoned Hotel - Floor 1</title>
<meta charset = "utf-8">
<meta name="viewport" content ="width=device-width, initial-scale=1">
<style>
@import url('https://fonts.googleapis.com/css2?family=Nosifer&display=swap');
* {
box-sizing: border-box;
}
body{
background-color: black;
}
#header{
height: 50px;
font-size: 2em;
text-align: center;
color: purple;
font-family: 'Nosifer', cursive;
}
#wrapper{
background-color: lightslategray;
width: 100%;
margin-top: 50px;
display: table;
border: solid rgb(163, 21, 21) 5px;
padding:200px;
}
img{
height: 10%;
width: 90%;
}
.Pheader{
font-family: 'Nosifer', cursive;
}
#h1{
font-size: 2em;
}
p{
font-size: 1.2em;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 20px;
height: 3-0px; /* Should be removed. Only for demonstration */
}
.Gridrow{
grid-row: 1/3;
grid-column: 2/3;
width:50%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>
<script>
function safeCombo(){
var combo = prompt('ENTER SAFE CODE');
if(combo == '1922'){
SafeOpened = true;
alert("Safe Opened!");
}
else{
alert("This is not the correct combination.")
}
}
function keyObtained(){
let nar = document.getElementById('narrative')
if(SafeOpened == true){
document.getElementById('melt_ice').removeAttribute('hidden');
}
}
function ElevatorValidation(){
let nar = document.getElementById('narrative')
if(KeyMelted = true){
nar.innerHTML = "You stab the keyhole with the key and turn it. The screeching metal sends a shiver up your spine, however the elevator is now open.";
}
}
let HonorsRoomFirstTime = false;
let StorageRoomFirstTime = false;
let LoungeRoomFirstTime = false;
let SafeOpened = false;
let KeyMelted = false;
let SafeCombo = document.getElementById('SafeCombo');
let SafeCorrectCombo = '1922';
function Change_Text(myNar){
let option1 = document.getElementById("begin_game");
let option2 = document.getElementById("honors_room");
let option3 = document.getElementById("storage_room");
let option4 = document.getElementById("lounge_room");
let option5 = document.getElementById("read_plaque");
let option6 = document.getElementById("elevator");
let nar = document.getElementById("narrative");
let room = document.getElementById("roomHeader");
switch(myNar){
case 'begin_game':
room.innerHTML = "<h2>Floor One</h2>"
nar.innerHTML = "You stand in the Corridor Alone. This is clearly a puzzle. To which room will you travel first?"
document.getElementById('begin_game').setAttribute('hidden','hidden');
document.getElementById("honors_room").removeAttribute('hidden');
document.getElementById("lounge_room").removeAttribute('hidden');
document.getElementById("storage_room").removeAttribute('hidden');
var img = document.getElementById('image');
img.src = "Images/CreepyHallway.jpg";
break;
case 'honors_room':
room.innerHTML = "<h2>The Honours Room</h2>"
nar.innerHTML = "You enter the Honours Room. The dust nearly suffocates you and it makes it impossible to see beyond a grey haze."
nar.innerHTML += "Nearby there seems to be a wooden plaque. Other than that, there seems to be nothing more to see."
nar.innerHTML += "<br><span style = 'color:red'>Could this plaque be helpful to me?</span>"
document.getElementById('lounge_room').removeAttribute('hidden');
document.getElementById('storage_room').removeAttribute('hidden');
document.getElementById('read_plaque').removeAttribute('hidden');
document.getElementById('honors_room').setAttribute('hidden','hidden');
document.getElementById('open_safe').setAttribute('hidden','hidden');
document.getElementById('melt_ice').setAttribute('hidden','hidden');
var img = document.getElementById('image');
img.src = "Images/CreepyHonoursRoom.JPG";
break;
case 'storage_room':
room.innerHTML = "<h2>The Storage Room</h2>";
nar.innerHTML = "You enter the Storage Room. You're shocked to discover what's in there...Cages upon cages, stacked to the roof."
nar.innerHTML += "And the cages contain...fresh corpses. The smell violates your senses and you feel extremely nauseous."
nar.innerHTML += "<span style = 'color:red'>But there is a safe nearby...You could attempt to open it.</span>"
document.getElementById('storage_room').setAttribute('hidden','hidden');
document.getElementById('honors_room').removeAttribute('hidden');
document.getElementById('read_plaque').setAttribute('hidden','hidden');
document.getElementById('melt_ice').setAttribute('hidden','hidden');
document.getElementById('open_safe').removeAttribute('hidden');
var img = document.getElementById('image');
img.src = "Images/CreepyStorageRoom.JPG"
break;
case 'lounge_room':
room.innerHTML = "<h2>The Lounge Room</h2>"
nar.innerHTML = "You enter the Lounge Room. You're surprised. Compared to the rest of the building, this room seems...eerily oversanitised. "
nar.innerHTML += "It seems to resemble that of a hospital which how oversanitised it appears. <span style='color: red'> In front of you there is a fireplace which..."
nar.innerHTML += "Is lit?? </span> There seems to be something greater happening behind the scenes."
document.getElementById('honors_room').removeAttribute('hidden');
document.getElementById('storage_room').removeAttribute('hidden');
document.getElementById('open_safe').setAttribute('hidden','hidden');
document.getElementById('lounge_room').setAttribute('hidden','hidden');
document.getElementById('read_plaque').setAttribute('hidden','hidden');
keyObtained();
var img = document.getElementById('image');
img.src = "Images/CreepyLoungeRoom.jpg";
break;
case 'read_plaque':
nar.innerHTML = "You dust off the Plaque. The dust slithers up your nostrils and strangles your lungs."
nar.innerHTML += "The Plaque has clearly been defiled. Some of the Characters are red, however, <span style = 'color:red'>it looks rather specific: </span>";
nar.innerHTML +="<br>"
nar.innerHTML +="<br>"
nar.innerHTML += "<br><span style ='font:20px'><b>ADAM CUSHNAHAN.......<span style='color:red'>1</span>989</span>"
nar.innerHTML += "<br><span style ='font:20px'><b>GEMMA MORRIS.............199<span style='color:red'>9</span></span>"
nar.innerHTML += "<br><span style ='font:20px'><b>NOMA MSONZA...............<span style='color:red'>2</span>003"
nar.innerHTML += "<br><span style ='font:20px'><b>YOU.....................................202<span style='color:red'>2</span></span>"
document.getElementById('SafeCombo').setAttribute('hidden','hidden');
document.getElementById('read_plaque').setAttribute('hidden','hidden');
break;
case 'open_safe':
nar.innerHTML = "The Safe seems to take a four digit combination. Is there any clues around?<span style='color:red;'> Or perhaps, in another room? </span>";
safeCombo();
var img = document.getElementById('image');
img.src = "Images/CreepySafe.jpg"
break;
case 'melt_ice':
nar.innerHTML = "A ghostly puff of steam arises as you melt the ice off the key. <span style = 'color:red'>Finally, it seems that it's usable. You make your way to the Elevator.</span>"
document.getElementById('elevator').removeAttribute('hidden');
document.getElementById('melt_ice').setAttribute('hidden','hidden');
document.getElementById('honors_room').setAttribute('hidden','hidden');
document.getElementById('storage_room').setAttribute('hidden','hidden');
break;
case 'elevator':
room.innerHTML = "<h2>The elevator</h2>";
nar.innerHTML = "You stab the key hole with the key in a desperate attempt to create space between you and whatever is hunting you. You quickly slide into the elevator as it ascends to the next floor.";
document.getElementById('next_floor').removeAttribute('hidden');
document.getElementById('elevator').setAttribute('hidden','hidden');
var img = document.getElementById('image');
img.src = "Images/CreepyElevator.jpg";
break;
case 'next_floor':
//CODE FOR NEXT PAGE HERE
break;
}
}
</script>
</head>
<body>
<div id = "header">
<h2>Abandoned Hotel</h2>
</div>
<div id = "wrapper">
<div class="column">
<span id="roomHeader "><h2>Floor 1 - The Awakening</h2></span>
<img id="image" src = "Images/CreepyHallway.jpg">
</div>
<div class="column">
<span>
<p><span id="narrative">Expecting to reach the roof, the elevator instead comes to a halt at floor 1. You press the top floor's button impatiently. No luck. <br>
You step off the elevator entering floor one when the elevator firmly shuts behind you. Any closer to it and you may have lost an arm. The lights spot you,
and suddenly come alive.
At the other side of this dimly lit, dirty corridor, you spot another elevator. This feels like a death trap, you thought to yourself.<br>
But there was no time to wait, as banging came from the door you just left. Something is trying to enter.<br>
And then it stopped.
You can hear breathing coming from the other side. Coarse, heavy, breathing.
The intercom then sprang alive.<br>
<span style = "color: red">60 Seconds Remaining!</span><br>
You knew you mustn't waste any time.</p>
</span>
<div class="Gridrow">
<button type = "button" onclick = "Change_Text(id)" name = "options" id ="begin_game">Begin.</button>
<button type = "button" hidden onclick= "Change_Text(id)" name = "options" id = "storage_room">Storage Room</button>
<button type = "button" hidden onclick = "Change_Text(id)" name = "options" id = "open_safe">Open Safe</button>
<button type = "button" hidden onclick = "Change_Text(id)" name = "options" id = "honors_room">Honours Room</button>
<button type = "button" hidden onclick = "Change_Text(id)" name = "options" id = "lounge_room">Lounge Room</button>
<button type = "button" hidden onclick = "Change_Text(id)" name = "options" id = "read_plaque">Read Plaque</button>
<button type = "button" hidden onclick = "Change_Text(id)" name = "options" id = "melt_ice">Use the fire to melt the ice</button>
<button type = "button" hidden onclick = "Change_Text(id)" name = "options" id = "elevator">Open elevator</button>
<button type = "button" hidden onclick = "Change_Text(id)" name = "options" id = "next_floor">Proceed to next Floor</button>
<button type = "button" hidden onclick = "Change_Text(id)" name = "options" id="opening_safe">Try to Open Safe</button>
</div>
</div>
</div>
</body>
</html>
However, it refuses to work.
Please help!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）