Problems with multistep progress bar progressing 3 steps instead of 4

JavaScript
1

I’m teaching myself programming whilst builodng a website.

I am struggling with a multistep progress bar. There are 4 steps but the progress bar completes in 3 when I click the previous of next button.

I’ve adapted the code for my webiste but I can’t find where the progress bar length is determined. I’ve looked at changing it to 25% in JS but there is no indicatin of the bar length that I can find.

It looks like the Js code could be missing a step in the html code but I can’t find that either.

Step1 is OK but the problem starts with step 2. It seems to progress 40%.

The HTML code is:

<div class="container"> 
		<div class="progress-container"> 
			<ul id="progressbar"> 
				<li class="active"
					id="step1"> 
					<strong>Booking</strong> 
				</li> 
				<li id="step2"> 
					<strong>Details</strong> 
				</li> 
				<li id="step3"> 
					<strong>Checkout</strong> 
				</li> 
				<li id="step4"> 
					<strong>Confirmation</strong> 
				</li> 
			</ul> 
    
			<div class="progress"> 
				<div class="progress-bar"></div> 
			</div> 
		</div>

Here is the Js script

// script.js 
document.addEventListener("DOMContentLoaded", function () { 
	const progressListItems = 
		document.querySelectorAll("#progressbar li"); 
	const progressBar = 
		document.querySelector(".progress-bar"); 
	let currentStep = 0; 

	function updateProgress() { 
		const percent = 
			(currentStep / (progressListItems.length - 1)) * 100; 
		progressBar.style.width = percent + "%"; 

		progressListItems.forEach((item, index) => { 
			if (index === currentStep) { 
				item.classList.add("active"); 
			} else { 
				item.classList.remove("active"); 
			} 
		}); 
	} 

	function showStep(stepIndex) { 
		const steps = 
			document.querySelectorAll(".step-container fieldset"); 
		steps.forEach((step, index) => { 
			if (index === stepIndex) { 
				step.style.display = "block"; 
			} else { 
				step.style.display = "none"; 
			} 
		}); 
	} 

	function nextStep() { 
		if (currentStep < progressListItems.length - 1) { 
			currentStep++; 
			showStep(currentStep); 
			updateProgress(); 
		} 
	} 

	function prevStep() { 
		if (currentStep > 0) { 
			currentStep--; 
			showStep(currentStep); 
			updateProgress(); 
		} 
	} 

	const nextStepButtons = 
		document.querySelectorAll(".next-step"); 
	const prevStepButtons = 
		document.querySelectorAll(".previous-step"); 

	nextStepButtons.forEach((button) => { 
		button.addEventListener("click", nextStep); 
	}); 

	prevStepButtons.forEach((button) => { 
		button.addEventListener("click", prevStep); 
	}); 
});

2 
(currentStep / (progressListItems.length - 1)) * 100;

progressListItems.length = 4; -1 = 3 (can we see the problem yet?)

if i’m on step 1, 1 / (4-3) * 100 = 33%…

3

There are, in fact, 5 steps in your 4 stage operation:
Start
After Step 1
After Step 2
After Step 3
Done.

This is referred to as a Fencepost Problem. (“I have 4 panels of fencing to put up… but i actually need to space out 5 posts, because the ends both have to be covered…”)

NOTE: I am assuming that “confirmation” is a step, and not the finished screen. If it is the finish screen, you’ve got some extra work to do on the bar; if it’s not, you should add an extra step for the finish screen.

4

Thanks for your help.

I’ve tried allsorts to sort this problem out like adding an extra div with jus

, changing the numbers etc but they didn’t work.

What I have decided to do is this, change the 1 to 0 (4-0) * 100 + 25%.

The confirmation stage doesn’t complete but for me it doesn’t matter. The reason being that it is something that the system will do and not the customer.

I have changed the message to let the customer know that they will get a confirmation.

I’m not certain that it’s the right approach.

It looks like I need to change the count from 5 to 4 but I don’t know how to do that.

How can I remove confirmation from the side bar and get the progress bar to end at checkout?

5

(What side bar? What you’ve shown us doesnt have a side bar.)

6

I think you have made a mistake.

My thread’s heading states that it’s a progress bar, They normally (as mine) run accross the top of a screen.

7

I’m not sure how I have made a mistake… .

That’s YOU saying there is a side bar youre trying to get a confirmation out of…

Perhaps im misunderstanding you.

8

Shouldn’t you also have an extra fiedlset in there as @m_hutley suggests there are 5 steps.

e.g.

9

I don’t make mistakes … Just minor with and rare major cockups :grinning:

1 Like
10

An extra fieldset… That’s an explanation that I understand.

From a previous reply I worked out that I need 5 but I didn’t know what of (it’s not mentioned). I tried to add an extra step in html with

. That didn’t work. So I tried 4 /0 which gives 25% (100/4).

I also tried a few other ways as mentioned above.

1 Like
11

Hopefully my codepen is working as I think you want it. I did change a couple of your comparisons in the js also.

12

Hopefully my codepen is working as I think you want it. I did change a couple of your comparisons in the js also.

13

It’s a bit difficult for me to see what you have done on the small screen. I’ve C+P the files into notepad so that I can print and compare them.That way, I will learn.

I did create a set of bars, one for for each URL but I thought that it would be easier to use one!

Thanks

14

Hi,

Yes it works.

Thanks

1 Like
15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.