javascript - Step through matrix issues when wanting to go back one step for web app HTML,CSS JS - Stack Overflow

admin•2025-04-15 13:57:21•questions•阅读1

I have been learning web dev and have some minor knowledge of Python, so I set myself what I thought wa

I have been learning web dev and have some minor knowledge of Python, so I set myself what I thought was a simple task of a set through the web app.

The issue I'm stuck with is that I have created sections that ask the user a Yes/No question. The user will click the corresponding button. I have also created a previous step button in case the user accidentally selects the wrong answer. As well as a back-to-main menu button.

Moving through the matrix shows only one section, which is fine. But at some point, when you drill through and want to go back a step or back to the start, it shows the last step, which isn't what I want. Clicking back to the start will show the previous two sections/steps.

I feel this could be something simple I am missing, but I think I'm missing it when I try to debug

What I want if the user clicks "back"

What I get instead

Code

I made sure each section has a unique ID and includes the "Back" and "Start Over" buttons.

I updated the JavaScript to handle the navigation history and ensure that only the current step is visible. I tried to ensure the prevStep and startOver functions are properly hiding the current step before showing the previous step or the first step.

let historyStack = [];

function nextStep(stepId) {
  const currentStep = document.querySelector('section:not([style*="display: none"])');
  if (currentStep) {
    historyStack.push(currentStep.id);
    currentStep.style.display = 'none';
  }
  document.getElementById(stepId).style.display = 'block';
}

function prevStep() {
  const currentStep = document.querySelector('section:not([style*="display: none"])');
  if (currentStep) {
    currentStep.style.display = 'none';
  }
  const prevStepId = historyStack.pop();
  if (prevStepId) {
    document.getElementById(prevStepId).style.display = 'block';
  }
}

function startOver(stepId) {
  const currentStep = document.querySelector('section:not([style*="display: none"])');
  if (currentStep) {
    currentStep.style.display = 'none';
  }
  historyStack = [];
  document.getElementById(stepId).style.display = 'block';
}

function mainMenu() {
  window.location.href = '/FFTTG/FFTG-Home.html';
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

header {
  background-color: #333;
  color: #fff;
  padding: 1em 0;
  text-align: center;
}


main {
  padding: 1em;
}

section {
  margin-bottom: 1em;
}

button {
  margin: 0.5em;
  padding: 0.5em 1em;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 1em 0;
  position: fixed;
  width: 100%;
  bottom: 0;
}

.card {
  border: 1px solid #ccc;
  padding: 1em;
  margin: 1em 0;
  background-color: #fff;
}

.card img {
  max-width: 100px;
  margin-right: 10px;
  vertical-align: middle;
}

#Control-box-front {
  transition: all 0.3s ease;
}

#Control-box-front:hover {
  content: url('public/images/Control-box-front-green.png');
}

/* From Uiverse.io by chase2k25 */
.card {
  width: 400px;
  height: 400px;
  border-radius: 8px;
  background: linear-gradient(145deg, #333, #000);
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0.4em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.card p {
  flex: 1;
  overflow: hidden;
  cursor: pointer;
  border-radius: 8px;
  transition: flex 0.5s;
  background: linear-gradient(145deg, #212121, #000);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* Align items at the top */
}

.card p:hover {
  flex: 4;
}

.card p span {
  padding: 0.2em;
  text-align: center;
  transform: rotate(-0deg);
  transition: transform 0.5s;
  text-transform: uppercase;
  color: white;
  font-weight: bold;
  /* Removed quotes */
  letter-spacing: 0.1em;
  position: relative;
  z-index: 1;
}

.card p:hover span {
  transform: rotate(0);
}

.card p::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.1);
  z-index: 0;
  transition: opacity 0.5s;
  pointer-events: none;
  opacity: 0;
}

.card p:hover::before {
  opacity: 1;
}

.card p img {
  max-width: 350px;
  margin-right: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fire Tank Troubleshooting Guide</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <h1>FFTTG System Won't Run</h1>
  </header>
  <main>
    <section id="step1">
      <h2>Step 1: System Won’t Turn On</h2>
      <p>Hydraulic Pump Won’t Run</p>
      <p>Are any LED’s illuminated on the Isolair Display Box?</p>
      <button onclick="nextStep('step2Yes')">YES</button>
      <button onclick="nextStep('step2No')">NO</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step2Yes" style="display:none;">
      <h2>Step 2: Toggle the Jettison Switch</h2>
      <p>Toggle the Jettison Switch a few times and make
        sure it is in the normal operating position -UP.
        Does the system turn on?</p>
      <button onclick="nextStep('step3.0Yes')">YES</button>
      <button onclick="nextStep('step3.1No')">NO</button>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step2No" style="display:none;">
      <h2>Step 2: Circuit Breakers</h2>
      <p>Have any of the Circuit Breakers on the Isolair
        Display box popped?</p>
      <button onclick="nextStep('step3.2Yes')">YES</button>
      <button onclick="nextStep('step3.3No')">NO</button>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step3.0Yes" style="display:none;">
      <h2>Step 3.1: Jettison Switch</h2>
      <p>Jettison Switch was in ‘off’
        position or was faulty and
        beginning to fail. If this was
        the case, change Jettison
        switch ASAP</p>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step3.1No" style="display:none;">
      <h2>Step 3.1: Change Cyclic Controller</h2>
      <p>Change Cyclic Controller. Does system turn on?</p>
      <button onclick="nextStep('step4.1Yes')">YES</button>
      <button onclick="nextStep('step4.2No')">NO</button>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step3.2Yes" style="display:none;">
      <h2>Step 3.2: Circuit Breakers</h2>
      <p>Reset and try again</p>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step3.3No" style="display:none;">
      <h2>Step 3.2: Ground Power?</h2>
      <p>Are you operating off ground power? (engines not running?)</p>
      <button onclick="nextStep('step214Yes')">214 Ground Power</button>
      <button onclick="nextStep('stepBUSNo')">204 & OR No</button>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step214Yes" style="display:none;">
      <h2>Step 214: Ground Power</h2>
      <p>Ensure ‘NON-ESSENTIAL BUS’ is in the Manual position. Does System now turn on?</p>
      <button onclick="nextStep('stepBUSYes')">Yes</button>
      <button onclick="nextStep('stepBUSNo')">No</button>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="stepBUSYes" style="display:none;">
      <h2>Step BUS: Manual Position</h2>
      <p>214’s must always have ‘Manual’ selected when checking from ground power</p>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="stepBUSNo" style="display:none;">
      <h2>Step NON-ESSENTIAL BUS / 204 / Ground power : Circuit Breakers Check</h2>
      <p>Check ALL relevant aircraft Circuit Breakers. Continue with part 2.2 Circuit Breakers Check</p>
      <button onclick="nextStep('stepCircuitBreakerCheck')">Circuit Breaker Check</button> <!-- Add Circuit Breaker check after building matrix-->
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step4.1Yes" style="display:none;">
      <h2>Change Cyclic Controller</h2>
      <p>Faulty Cyclic Controller. Use Wiring Diagram 6.1 to determine which switch (either Jettison or Door Switch) was faulty and replace ASAP</p>
      <button onclick="nextStep('FaultyCyclicController')">Cyclic Wiring Diagram</button> <!-- Add Cyclic Wiring Diagram after building matrix-->
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step4.2No" style="display:none;">
      <h2>Step 4.2: Change Pressure Switch</h2>
      <p>Change Pressure Switch. Does the system now turn on?</p>
      <button onclick="nextStep('step5.1Yes')">YES</button>
      <button onclick="nextStep('step5.2No')">NO</button>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step5.1Yes" style="display:none;">
      <h2>Step 5.1: Pressure Switch Change</h2>
      <p>Pressure Switch was faulty. Discard.</p>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver('step1')">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step5.2No" style="display:none;">
      <h2>Step 5.1: Wiring Or Relays</h2>
      <p>Most likely a problem with wiring or relays. Begin a more thorough check, continue with para. 2.4.1- Tank Power Supply Check.</p>
      <button onclick="nextStep('TankPowerSupplyCheck')">Tank Power Supply Check</button> <!-- Add Tank Power Supply Check after building matrix-->
      <button onclick="prevStep()">Back</button>
      <p font="bold">If Checks fail to locate the Problem, begin troubleshooting <span style="color: red; text-transform: uppercase;">again</span></p>
      <button onclick="startOver('step1')">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
  </main>

I have been learning web dev and have some minor knowledge of Python, so I set myself what I thought was a simple task of a set through the web app.

I feel this could be something simple I am missing, but I think I'm missing it when I try to debug

What I want if the user clicks "back"

What I get instead

Code

I made sure each section has a unique ID and includes the "Back" and "Start Over" buttons.

let historyStack = [];

function nextStep(stepId) {
  const currentStep = document.querySelector('section:not([style*="display: none"])');
  if (currentStep) {
    historyStack.push(currentStep.id);
    currentStep.style.display = 'none';
  }
  document.getElementById(stepId).style.display = 'block';
}

function prevStep() {
  const currentStep = document.querySelector('section:not([style*="display: none"])');
  if (currentStep) {
    currentStep.style.display = 'none';
  }
  const prevStepId = historyStack.pop();
  if (prevStepId) {
    document.getElementById(prevStepId).style.display = 'block';
  }
}

function startOver(stepId) {
  const currentStep = document.querySelector('section:not([style*="display: none"])');
  if (currentStep) {
    currentStep.style.display = 'none';
  }
  historyStack = [];
  document.getElementById(stepId).style.display = 'block';
}

function mainMenu() {
  window.location.href = '/FFTTG/FFTG-Home.html';
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

header {
  background-color: #333;
  color: #fff;
  padding: 1em 0;
  text-align: center;
}


main {
  padding: 1em;
}

section {
  margin-bottom: 1em;
}

button {
  margin: 0.5em;
  padding: 0.5em 1em;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 1em 0;
  position: fixed;
  width: 100%;
  bottom: 0;
}

.card {
  border: 1px solid #ccc;
  padding: 1em;
  margin: 1em 0;
  background-color: #fff;
}

.card img {
  max-width: 100px;
  margin-right: 10px;
  vertical-align: middle;
}

#Control-box-front {
  transition: all 0.3s ease;
}

#Control-box-front:hover {
  content: url('public/images/Control-box-front-green.png');
}

/* From Uiverse.io by chase2k25 */
.card {
  width: 400px;
  height: 400px;
  border-radius: 8px;
  background: linear-gradient(145deg, #333, #000);
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0.4em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.card p {
  flex: 1;
  overflow: hidden;
  cursor: pointer;
  border-radius: 8px;
  transition: flex 0.5s;
  background: linear-gradient(145deg, #212121, #000);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* Align items at the top */
}

.card p:hover {
  flex: 4;
}

.card p span {
  padding: 0.2em;
  text-align: center;
  transform: rotate(-0deg);
  transition: transform 0.5s;
  text-transform: uppercase;
  color: white;
  font-weight: bold;
  /* Removed quotes */
  letter-spacing: 0.1em;
  position: relative;
  z-index: 1;
}

.card p:hover span {
  transform: rotate(0);
}

.card p::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.1);
  z-index: 0;
  transition: opacity 0.5s;
  pointer-events: none;
  opacity: 0;
}

.card p:hover::before {
  opacity: 1;
}

.card p img {
  max-width: 350px;
  margin-right: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fire Tank Troubleshooting Guide</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <h1>FFTTG System Won't Run</h1>
  </header>
  <main>
    <section id="step1">
      <h2>Step 1: System Won’t Turn On</h2>
      <p>Hydraulic Pump Won’t Run</p>
      <p>Are any LED’s illuminated on the Isolair Display Box?</p>
      <button onclick="nextStep('step2Yes')">YES</button>
      <button onclick="nextStep('step2No')">NO</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step2Yes" style="display:none;">
      <h2>Step 2: Toggle the Jettison Switch</h2>
      <p>Toggle the Jettison Switch a few times and make
        sure it is in the normal operating position -UP.
        Does the system turn on?</p>
      <button onclick="nextStep('step3.0Yes')">YES</button>
      <button onclick="nextStep('step3.1No')">NO</button>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step2No" style="display:none;">
      <h2>Step 2: Circuit Breakers</h2>
      <p>Have any of the Circuit Breakers on the Isolair
        Display box popped?</p>
      <button onclick="nextStep('step3.2Yes')">YES</button>
      <button onclick="nextStep('step3.3No')">NO</button>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step3.0Yes" style="display:none;">
      <h2>Step 3.1: Jettison Switch</h2>
      <p>Jettison Switch was in ‘off’
        position or was faulty and
        beginning to fail. If this was
        the case, change Jettison
        switch ASAP</p>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step3.1No" style="display:none;">
      <h2>Step 3.1: Change Cyclic Controller</h2>
      <p>Change Cyclic Controller. Does system turn on?</p>
      <button onclick="nextStep('step4.1Yes')">YES</button>
      <button onclick="nextStep('step4.2No')">NO</button>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step3.2Yes" style="display:none;">
      <h2>Step 3.2: Circuit Breakers</h2>
      <p>Reset and try again</p>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step3.3No" style="display:none;">
      <h2>Step 3.2: Ground Power?</h2>
      <p>Are you operating off ground power? (engines not running?)</p>
      <button onclick="nextStep('step214Yes')">214 Ground Power</button>
      <button onclick="nextStep('stepBUSNo')">204 & OR No</button>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step214Yes" style="display:none;">
      <h2>Step 214: Ground Power</h2>
      <p>Ensure ‘NON-ESSENTIAL BUS’ is in the Manual position. Does System now turn on?</p>
      <button onclick="nextStep('stepBUSYes')">Yes</button>
      <button onclick="nextStep('stepBUSNo')">No</button>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="stepBUSYes" style="display:none;">
      <h2>Step BUS: Manual Position</h2>
      <p>214’s must always have ‘Manual’ selected when checking from ground power</p>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="stepBUSNo" style="display:none;">
      <h2>Step NON-ESSENTIAL BUS / 204 / Ground power : Circuit Breakers Check</h2>
      <p>Check ALL relevant aircraft Circuit Breakers. Continue with part 2.2 Circuit Breakers Check</p>
      <button onclick="nextStep('stepCircuitBreakerCheck')">Circuit Breaker Check</button> <!-- Add Circuit Breaker check after building matrix-->
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step4.1Yes" style="display:none;">
      <h2>Change Cyclic Controller</h2>
      <p>Faulty Cyclic Controller. Use Wiring Diagram 6.1 to determine which switch (either Jettison or Door Switch) was faulty and replace ASAP</p>
      <button onclick="nextStep('FaultyCyclicController')">Cyclic Wiring Diagram</button> <!-- Add Cyclic Wiring Diagram after building matrix-->
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step4.2No" style="display:none;">
      <h2>Step 4.2: Change Pressure Switch</h2>
      <p>Change Pressure Switch. Does the system now turn on?</p>
      <button onclick="nextStep('step5.1Yes')">YES</button>
      <button onclick="nextStep('step5.2No')">NO</button>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step5.1Yes" style="display:none;">
      <h2>Step 5.1: Pressure Switch Change</h2>
      <p>Pressure Switch was faulty. Discard.</p>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver('step1')">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step5.2No" style="display:none;">
      <h2>Step 5.1: Wiring Or Relays</h2>
      <p>Most likely a problem with wiring or relays. Begin a more thorough check, continue with para. 2.4.1- Tank Power Supply Check.</p>
      <button onclick="nextStep('TankPowerSupplyCheck')">Tank Power Supply Check</button> <!-- Add Tank Power Supply Check after building matrix-->
      <button onclick="prevStep()">Back</button>
      <p font="bold">If Checks fail to locate the Problem, begin troubleshooting <span style="color: red; text-transform: uppercase;">again</span></p>
      <button onclick="startOver('step1')">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
  </main>

Share Improve this question edited Mar 17 at 17:24 ADyson 62.2k16 gold badges79 silver badges92 bronze badges asked Mar 17 at 16:27 Jezz 135 bronze badges

Add a comment |

2 Answers 2

Sorted by: Reset to default 0

Your CSS selectors like section:not([style*="display: none"] aren't working. Relying on display attributes like this won't work - it's fragile (relying on matching the text of the attribute exactly, including spaces) etc and anyway only gives you the initial state - it can't indicate the current, computed state of the DOM.

One solution is to add and remove classes to your elements instead.

I also fixed an issue I noticed where the "Start Over" button didn't work because it relied on an defined variable to decide what step to go to. Since the first step is always "step1" I've hard-coded that for now, you may want to do something different in the end of course.

Demo:

let historyStack = [];

function nextStep(stepId) {
  const currentStep = document.querySelector('section:not(.hidden)');
  if (currentStep) {
    historyStack.push(currentStep.id);
    currentStep.classList.add("hidden");
  }
  document.getElementById(stepId).classList.remove("hidden");
}

function prevStep() {
  const currentStep = document.querySelector('section:not(.hidden)');
  if (currentStep) {
    currentStep.classList.add("hidden");
  }
  const prevStepId = historyStack.pop();
  if (prevStepId) {
    document.getElementById(prevStepId).classList.remove("hidden");
  }
}

function startOver() {
  const currentStep = document.querySelector('section:not(.hidden)');
  if (currentStep) {
    currentStep.classList.add("hidden");
  }
  historyStack = [];
  document.getElementById("step1").classList.remove("hidden");
}

function mainMenu() {
  window.location.href = '/FFTTG/FFTG-Home.html';
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

header {
  background-color: #333;
  color: #fff;
  padding: 1em 0;
  text-align: center;
}


main {
  padding: 1em;
}

section {
  margin-bottom: 1em;
}

button {
  margin: 0.5em;
  padding: 0.5em 1em;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 1em 0;
  position: fixed;
  width: 100%;
  bottom: 0;
}

.card {
  border: 1px solid #ccc;
  padding: 1em;
  margin: 1em 0;
  background-color: #fff;
}

.card img {
  max-width: 100px;
  margin-right: 10px;
  vertical-align: middle;
}

#Control-box-front {
  transition: all 0.3s ease;
}

#Control-box-front:hover {
  content: url('public/images/Control-box-front-green.png');
}

/* From Uiverse.io by chase2k25 */
.card {
  width: 400px;
  height: 400px;
  border-radius: 8px;
  background: linear-gradient(145deg, #333, #000);
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0.4em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.card p {
  flex: 1;
  overflow: hidden;
  cursor: pointer;
  border-radius: 8px;
  transition: flex 0.5s;
  background: linear-gradient(145deg, #212121, #000);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* Align items at the top */
}

.card p:hover {
  flex: 4;
}

.card p span {
  padding: 0.2em;
  text-align: center;
  transform: rotate(-0deg);
  transition: transform 0.5s;
  text-transform: uppercase;
  color: white;
  font-weight: bold;
  /* Removed quotes */
  letter-spacing: 0.1em;
  position: relative;
  z-index: 1;
}

.card p:hover span {
  transform: rotate(0);
}

.card p::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.1);
  z-index: 0;
  transition: opacity 0.5s;
  pointer-events: none;
  opacity: 0;
}

.card p:hover::before {
  opacity: 1;
}

.card p img {
  max-width: 350px;
  margin-right: 10px;
}

.hidden
{
  display:none;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fire Tank Troubleshooting Guide</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <h1>FFTTG System Won't Run</h1>
  </header>
  <main>
    <section id="step1">
      <h2>Step 1: System Won’t Turn On</h2>
      <p>Hydraulic Pump Won’t Run</p>
      <p>Are any LED’s illuminated on the Isolair Display Box?</p>
      <button onclick="nextStep('step2Yes')">YES</button>
      <button onclick="nextStep('step2No')">NO</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step2Yes" class="hidden">
      <h2>Step 2: Toggle the Jettison Switch</h2>
      <p>Toggle the Jettison Switch a few times and make
        sure it is in the normal operating position -UP.
        Does the system turn on?</p>
      <button onclick="nextStep('step3.0Yes')">YES</button>
      <button onclick="nextStep('step3.1No')">NO</button>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step2No" class="hidden">
      <h2>Step 2: Circuit Breakers</h2>
      <p>Have any of the Circuit Breakers on the Isolair
        Display box popped?</p>
      <button onclick="nextStep('step3.2Yes')">YES</button>
      <button onclick="nextStep('step3.3No')">NO</button>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step3.0Yes" class="hidden">
      <h2>Step 3.1: Jettison Switch</h2>
      <p>Jettison Switch was in ‘off’
        position or was faulty and
        beginning to fail. If this was
        the case, change Jettison
        switch ASAP</p>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step3.1No" class="hidden">
      <h2>Step 3.1: Change Cyclic Controller</h2>
      <p>Change Cyclic Controller. Does system turn on?</p>
      <button onclick="nextStep('step4.1Yes')">YES</button>
      <button onclick="nextStep('step4.2No')">NO</button>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step3.2Yes" class="hidden">
      <h2>Step 3.2: Circuit Breakers</h2>
      <p>Reset and try again</p>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step3.3No" class="hidden">
      <h2>Step 3.2: Ground Power?</h2>
      <p>Are you operating off ground power? (engines not running?)</p>
      <button onclick="nextStep('step214Yes')">214 Ground Power</button>
      <button onclick="nextStep('stepBUSNo')">204 & OR No</button>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step214Yes" class="hidden">
      <h2>Step 214: Ground Power</h2>
      <p>Ensure ‘NON-ESSENTIAL BUS’ is in the Manual position. Does System now turn on?</p>
      <button onclick="nextStep('stepBUSYes')">Yes</button>
      <button onclick="nextStep('stepBUSNo')">No</button>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="stepBUSYes" class="hidden">
      <h2>Step BUS: Manual Position</h2>
      <p>214’s must always have ‘Manual’ selected when checking from ground power</p>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="stepBUSNo" class="hidden">
      <h2>Step NON-ESSENTIAL BUS / 204 / Ground power : Circuit Breakers Check</h2>
      <p>Check ALL relevant aircraft Circuit Breakers. Continue with part 2.2 Circuit Breakers Check</p>
      <button onclick="nextStep('stepCircuitBreakerCheck')">Circuit Breaker Check</button> <!-- Add Circuit Breaker check after building matrix-->
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step4.1Yes" class="hidden">
      <h2>Change Cyclic Controller</h2>
      <p>Faulty Cyclic Controller. Use Wiring Diagram 6.1 to determine which switch (either Jettison or Door Switch) was faulty and replace ASAP</p>
      <button onclick="nextStep('FaultyCyclicController')">Cyclic Wiring Diagram</button> <!-- Add Cyclic Wiring Diagram after building matrix-->
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step4.2No" class="hidden">
      <h2>Step 4.2: Change Pressure Switch</h2>
      <p>Change Pressure Switch. Does the system now turn on?</p>
      <button onclick="nextStep('step5.1Yes')">YES</button>
      <button onclick="nextStep('step5.2No')">NO</button>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step5.1Yes" class="hidden">
      <h2>Step 5.1: Pressure Switch Change</h2>
      <p>Pressure Switch was faulty. Discard.</p>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver('step1')">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step5.2No" class="hidden">
      <h2>Step 5.1: Wiring Or Relays</h2>
      <p>Most likely a problem with wiring or relays. Begin a more thorough check, continue with para. 2.4.1- Tank Power Supply Check.</p>
      <button onclick="nextStep('TankPowerSupplyCheck')">Tank Power Supply Check</button> <!-- Add Tank Power Supply Check after building matrix-->
      <button onclick="prevStep()">Back</button>
      <p font="bold">If Checks fail to locate the Problem, begin troubleshooting <span style="color: red; text-transform: uppercase;">again</span></p>
      <button onclick="startOver('step1')">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
  </main>

I'd say that one fundamental problem with the approach you've taken is that you're essentially using the display state of the sections as a variable to store program state. This violates separation of content and presentation, leading to code that's confusing to follow and reason about. It would make much more sense to simply store it in a JavaScript variable, much like how you're storing historyStack.

Other than that, individually juggling CSS properties with JavaScript like this tends to be error-prone. I'd suggest that it would be more reliable to always hide all sections on every update (using either querySelectorAll or getElementsByClassName), ensuring that only the target section will be visible. In theory there should never be more than one, but if that assumption somehow ends up being false, you want your app to be able to handle it.

You might also want to consider using classes to control styling, rather than manually manipulating CSS values with JavaScript. This is generally a bit tidier, and you can give the class a semantic name that communicates what's going on to other developers.

First, since the <section> elements in your HTML all serve a similar purpose, you should assign them all the same class. We also assign the first section an additional class to indicate that it's currently active:

<section id="step1" class="troubleshooting-step active">
[...]
<section id="step2Yes" class="troubleshooting-step">
[etc.]

Now, we add CSS to hide all sections other than the active one (note that more specific selectors override less specific ones).

.troubleshooting-step {
    display: none;
}

.troubleshooting-step.active {
    display: block;
}

Now, we use a variable to track the current step we're at. We also use a new showStep() function to handle hiding any sections that are currently visible, and showing only the requested one.

let currentStepId;
let historyStack;

function showStep(stepId) {
    const steps = document.querySelectorAll('.troubleshooting-step');
    for (const step of steps) {
        step.classList.remove('active');
    }
    document.getElementById(stepId).classList.add('active');
}

function startOver() {
    historyStack = [];
    currentStepId = 'step1';
    showStep(currentStepId);
}

function nextStep(stepId) {
    historyStack.push(currentStepId);
    currentStepId = stepId;
    showStep(currentStepId);
}

function prevStep() {
    if (historyStack.length > 0) {
        currentStepId = historyStack.pop();
        showStep(currentStepId);
    }
}

function mainMenu() {
    window.location.href = '/FFTTG/FFTG-Home.html';
}

window.onload = startOver;  // Initialize variables on page load

Alternatively, you could handle everything with historyStack alone, though this is arguably a little less intuitive.

let historyStack;

function showStep(stepId) {
    const steps = document.querySelectorAll('.troubleshooting-step');
    for (const step of steps) {
        step.classList.remove('active');
    }
    document.getElementById(stepId).classList.add('active');
}

function startOver() {
    historyStack = ['step1'];
    showStep(historyStack.at(-1));
}

function nextStep(stepId) {
    historyStack.push(stepId);
    showStep(stepId);
}

function prevStep() {
    if (historyStack.length > 1) {
        historyStack.pop();
        showStep(historyStack.at(-1));
    }
}

function mainMenu() {
    window.location.href = '/FFTTG/FFTG-Home.html';
}

window.onload = startOver;  // Initialize variables on page load

There are countless ways to achieve what you're trying for, including a number of JavaScript frameworks that facilitate much more sophisticated manipulation of the DOM, but hopefully you found the above useful.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744546887a4580065.html

admin

questions
apache - What could cause strange delays while sending delays from a python aiohttp server? - Stack Overflow
We have a service with this architecture:HTTPS requests come into an A10 load balancer that does L4 loa
admin
25分钟前
10
questions
javascript - How to control <iframe> based YouTube player? - Stack Overflow
YouTube allows to use <iframe> to embed videos on sites in addition to flash based way of embeddi
admin
24分钟前
00
questions
url rewriting - rename author base from author url in wordpress not working
I am using the below code for rename author base, But its not working for me. I already save Settings>>permalinks
admin
24分钟前
00
questions
c - ESP32FreeRTOS stop scheduler at beginning of main - then init tasks and restart scheduler - Stack Overflow
I am working on a project using the ESP32 in combination with VS Code and the ESP IDF.Software is basi
admin
24分钟前
00
questions
javascript - How to get the client id while sending data to GA using Measurement protocol? - Stack Overflow
I have tried using analytics.js (Universal Analytics) through both frontend (js) and backend(Measuremen
admin
24分钟前
00
questions
javascript - Back Button not showing with Stack.Navigator - Stack Overflow
I'm trying to implement a simple navigation but for some reason back button it's not showing
admin
23分钟前
10
questions
Monaco Diff Editor but without highlighting the diff - Stack Overflow
I'm looking to use monaco Diff Editor in one of my projects (I'm using @monaco-editorreact w
admin
22分钟前
00
questions
javascript - React Native TouchableOpacity not working with position absolute - Stack Overflow
I have a list that shows results matching the user's input. The onPress of the touchableOpacity is
admin
20分钟前
10
questions
javascript - Sending a post request through Axios is generating an empty RequestBody in Spring-Boot backend. Works in Postman bu
I have a react frontend and a spring backend. I have rest service for the backend that takes a summariz
admin
16分钟前
10
questions
Resources to learn OOP for WordPress plugins, custom post types, etc
In a plugin, I need to create a custom post type and the associated admin menu modifications with a class rather than pr
admin
14分钟前
00
questions
typescript - How to get correct value type from generic object by key? - Stack Overflow
In the example I want to create a simple mapper which has to convert object values depends on its keys.
admin
14分钟前
00
questions
javascript - ReadAsDataURL() doesn't work - Stack Overflow
I was trying to implement a Drag n' Drop feature in my website.I need to convert the dropped imag
admin
13分钟前
00
questions
javascript - Draw a line between two coordinates in OpenLayers 4 - Stack Overflow
I want to draw a line between two coordinates in OpenLayers (OL) 4. I have been looking for documentati
admin
12分钟前
10
questions
denormalization - How to ensure data consistency for denormalized data in NoSQL? - Stack Overflow
I'm working on an event planning app using a NoSQL database that follows a denormalization strateg
admin
12分钟前
00
questions
Javascript XMlHttprequest to another domain - Stack Overflow
I am making a cross site http request using the Javascript XMlHttprequest api to send and retrieve data
admin
12分钟前
10
questions
javascript - watch file for new content and retrieve that content in NodeJS - Stack Overflow
I am monitoring the file for content change using Node.js watch File. Its succesfully calling the event
admin
9分钟前
00
questions
javascript - Show video blob after reading it through AJAX - Stack Overflow
While I was trying to create a workaround for Chrome unsupporting blobs in IndexedDB I discovered that
admin
8分钟前
00
questions
How to properly create a child theme
I would like to create a child theme based on the twentyeleven theme. I understand how to create my own styles.css file
admin
7分钟前
00
questions
javascript - n = n +1 is faster than n++ or ++n, why? - Stack Overflow
Check this test case: n = n + 1;is faster thann++;and++n;Any clue about why the first writing is so muc
admin
3分钟前
00
questions
Editing of .aspx page in SharePoint SharePoint Server 2016 - Stack Overflow
I am working on a SharePoint list which I did not create and where new items are added through a form (
admin
26秒前
00

发表回复

评论列表（0条）

暂无评论

javascript - Step through matrix issues when wanting to go back one step for web app HTML,CSS JS - Stack Overflow

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Step through matrix issues when wanting to go back one step for web app HTML,CSS JS - Stack Overflow

2 Answers 2

相关推荐

发表回复

评论列表（0条）

联系我们

400-800-8888