javascript html css web-applications step-through

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

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>

Solution

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>