Unresponsive HTML button

I'm currently developing an interactive text-based game that relies on button functionality to change text content. Everything was functioning perfectly until just a few moments ago, but now it has inexplicably stopped working. Here is the section of code in question:

<button type = "button" onclick = "Change_Text(id)" name = "options" id ="begin_game">Begin.</button>

This piece of code should correspond directly to this:

<!DOCTYPE html>
<html lang = "en">
    <head>
        <title>Deserted Manor - Level 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;
              }
              
              ... (CSS styles omitted for brevity)
              
        </style>
        <script>
            
            ... (JavaScript functions and variables omitted for brevity)

            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':
                        ... (switch cases omitted for brevity)
                    
            }

                
        }
        </script>
    </head>
    <body>

      ... (HTML body content omitted for brevity)

    </body>
</html>

Despite my best efforts, I haven't been able to resolve the issue. Any assistance would be greatly appreciated!

htmlcssjscript

Answer №1

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;
  }
}
@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;
}
<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Setting up the CSS loader in a Vue.js project using webpack

I am currently working on a new vue-cli project and have successfully installed the Pure.CSS framework using npm install purecss --save. However, I am struggling to seamlessly integrate, import, or load the css framework into my project. I am unsure of whe ...

csswebpackvue.jsnode-modulesvue-cli

troubles arise when using undeclared functions in javascript

Recently, I've been working on implementing a Javascript CountDown Timer triggered by a button click. The Javascript code is stored in an external file, as well as the CSS for styling the timer. The problem arose when I tried including the Javascript ...

javascripthtmlasp.netvb.netcountdowntimer

Utilizing HTML's multiple input type color feature to save selected colors directly to the database

I am currently using the input type color to select colors for customizing my site. I save the selected color to a database and then retrieve it to apply it to different areas of the site. This works well for a single input type color, but now I have mul ...

javascriptphpjqueryhtmlajax

Modify flex direction to column in response to changes in height of another div or when its content wraps

I am currently utilizing React MUI V5 and I am looking to modify the flex direction of a div from row to column when a preceding div changes in height or wraps. Below is a basic example of what I have implemented using plain HTML/CSS, but I am uncertain i ...

htmlcssreactjsflexboxmaterial-ui

Identify Safari browser and redirect visitors

Here is the script I am using to detect and redirect a page specifically when Safari is used: if(/safari/.test(navigator.userAgent.toLowerCase())) { window.location.href = "elsewhere.html" } Currently, it redirects in both Safari and Chrome. How can ...

javascripthtmlhttp-redirect

Steps to eliminate validation following the clearing of input fields

This is the code I've written for live validation using AJAX in an input field. My issue is that I want the validation to be removed if all inputs are deleted. <script type="text/javascript"> $(document).ready(function(){ ...

htmljqueryajax

Autofocus Styling with CSS Bootstrap

Currently, I am working on creating a grid of large buttons using React and Bootstrap. I have implemented CSS for hover and focus effects on these buttons. My main issue arises when I try to load the screen with one button already focused. I attempted to ...

cssreactjsbootstrap-4

Issue with content not properly aligning next to the vertical navigation bar

I've set my vertical navigation to be 10% width and my content to be 90%, but for some reason, I can't get them to align properly next to each other. I've experimented with float: left and display: inline-block, but so far nothing has worked ...

css

Prioritize the first child in Flexbox by truncating its text before the second

I am working with a flex-box container named .search-bar, which contains two divs with text, labeled as .title. My goal is to make the second child take up any extra space available and only start ellipsizing when there is no more space left for the first ...

cssflexboxellipsis

Using CSS to place the h1 text on top of an image

I need some advice on how to place a heading above an image. I have tried using negative margin and adjusting z-index, but the image still covers the heading. If you have a better solution, please let me know! Thank you in advance for your help! PS: Anot ...

css

The show-word-limit feature is malfunctioning on the element.eleme.io platform

After attempting to utilize the show-word-limit attribute of the input element, unfortunately the character count did not display. Below is the code snippet that was used: <el-input type="textarea" placeholder="Please input" ...

javascripthtmlvue.jsinputelement

Image background is not showing up in the input field

It seems like I've hit a roadblock with this issue. Despite my best efforts, I can't seem to find a solution. You can view the problem LIVE HERE. The banner's two input boxes should have background images displayed, but they are not showin ...

htmlcss

The console correctly detects the value, but is unable to set the innerHTML property of null

I am currently working on a webpage that allows users to sign in and create an account. The issue I'm facing is that when I try to display the user's information, I encounter the error 'Cannot set property 'innerHTML' of null.&apos ...

javascripthtml

Changing images dynamically using Javascript when hovering over an element

Looking to create a dynamic image switch effect on hover, where multiple images cycle through when hovered over. Each time the mouse hovers over the image, it should switch to the next in a sequence of 5 images. <img id="switch" src="img1.jpg"> $(& ...

javascriptjqueryhtml

Achieving Vertical Center Alignment in CSS

I'm having trouble understanding what's happening here: My goal is to vertically center an iframe and another div, both positioned alongside each other horizontally. What I've attempted is placing the iframe and div inside a new div called ...

htmlcsscss-tables

Can you explain how to utilize theme values in CSS within Mui?

Working on my React app with mui themes, I have the following in index.js: let theme = createTheme({ palette: { primary: { main: "#00aaa0", contrastText: '#fcf4d9', }, secondary: { main: "#D55B3E&quo ...

cssreactjsmaterial-ui

What is causing my HTML file path to function on my server, but not when I access the HTML file directly?

My file structure is organized as follows: The main file is located in the folder "HTML-Project/index.html". Within this folder, I have my style.css file and two other folders: one for pictures (HTML-Project/pictures) and another for categories (HTML-Proje ...

htmlcsswindowsfileserver

Storing parent entity along with child entities containing selected properties using ASP.NET Core MVC

Working on an ASP.NET Core MVC web app, I encountered a problem that can be best explained through this example: Let's consider a scenario where the user needs to save information about a book including its title, number of pages, and one or more aut ...

c#htmlasp.net-mvcasp.net-coreparent-child

Tips for incorporating transitions into CSS styling

After successfully adding a picture over an element when hovering over it, I decided to include a transition: 0.2s; property but unfortunately the transition effect is not working as expected. Why is this happening? My intention is for the picture to smoot ...

csscss-transitionstransition

Vanishing scrollbar issue with HTML

After examining the code provided, I've almost achieved the desired outcome. The only issue is that there are no scroll bars present. I have identified two potential solutions: 1) One option is to remove the !doctype declaration at the beginning of t ...

htmlcss