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') }
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(); }
//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 :)