Progress Bar Conditional

Ask the community
,
1

I am currently working on a site that requires me to add a progress bar and have a button that when pressed will increment the progress bar value.

I apologize if the element ID’s are unchanged, but I just started working on this, this is meant to be a proof of concept really.

$w ( ‘#button4’ ). onClick (() => {
$w ( ‘#progressBar’ ). value += 16
$w ( “#text36” ). text = You are ${ $w ( '#progressBar' ). value } % done.

if ( $w ( ‘#progressBar’ ). value === 100 ){
$w ( ‘#text36’ ). text = ‘Thank you for picking out everything.’
$w ( ‘#progressBar’ ). hide ();
} else {
console . log ( ‘the conditional statement has failed’ )
}

2

//PROGRESS BUTTONS
$w(“#button1”).onClick(function () {
$w(“#jobMultiStateBox”).changeState(“personalDetails”);
$w(“#progressBar1”).value = 0;

$w(“#anchor1”).scrollTo();
});

$w(“#button2”).onClick(function () {
$w(“#jobMultiStateBox”).changeState(“addressDetails”);
$w(“#progressBar1”).value = 35;

$w(“#anchor1”).scrollTo();
});

$w(“#button3”).onClick(function () {
$w(“#jobMultiStateBox”).changeState(“otherDetails”);
$w(“#progressBar1”).value = 65;

$w(“#anchor1”).scrollTo();
});

— I don’t know if this will help, but I used a multi state box connected to my progress bar.

– checkout this tutorial also : https://www.wixgenius.com/tutorial/simple-advance-multi-step-form :slight_smile:

3

I ended up figuring out a solution.

What I did was create a function that checks is the value of the progress bar is greater than 99, if true it changes text and hides the progress bar.

const checkProgBar = () => {
if ( $w ( ‘#progressBar’ ). value > 99 ){
$w ( ‘#text36’ ). text = ‘Thank you for picking out everything.’
$w ( ‘#progressBar’ ). hide ();
}