Button adding multiple times to progress bar

Ask the community
,
1

Hello, I am having a little problem. Before I get into the question, I would like to say that I am not posting about the same topic, as this is a whole different problem. My question is that I want my button to add +5 to the progress bar ONCE, only ONCE. My code right now is adding it multiple times if I click it multiple times. Can I restrict the button so that it can only add +5 once, no matter how many times the user clicks the button?

import wixLocation from ‘wix-location’ ;
import {local} from ‘wix-storage’ ;
$w.onReady( function () {
$w( “#progressBar1” ).value = Number(local.getItem( ‘progress’ ));
});
export function button1_click_(event){
let progress = Number(local.getItem( ‘progress’ )) + 5 ;
$w( ‘#progressBar1’ ).value = progress;
local.setItem( ‘progress’ , $w( ‘#progressBar1’ ).value + ‘’ );
[wixLocation.to(](wixLocation.to(“/Next) [”/Next](wixLocation.to("/Next) Level " );

}

2

Save a flag in local storage that indicates that the progress bar already had 5 added. If you want, you can even use the flag to disable the button so that the user can’t click it again.

Save the flag:
local.setItem(‘button_clicked’, ‘yes’);

Get the flag:
let buttonClicked = local.getItem(‘button_clicked’);

3

@yisrael-wix I used the code below,

import wixLocation from ‘wix-location’ ;
import {local} from ‘wix-storage’ ;
$w.onReady( function () {
$w( “#progressBar1” ).value = Number(local.getItem( ‘progress’ ));
});
export function button1_click_(event){
local.setItem( ‘button_clicked’ , ‘yes’ );
let buttonClicked = local.getItem( ‘button_clicked’ );
let progress = Number(local.getItem( ‘progress’ )) + 5 ;
$w( ‘#progressBar1’ ).value = progress;
local.setItem( ‘progress’ , $w( ‘#progressBar1’ ).value + ‘’ );
wixLocation.to( “/NextLevel” );

}

However, it is still adding multiple times. I do not want to disable the button, as I want the user to be able to click it. I just do not want the user to keep getting +5 multiple times. What should I do?

4

You aren’t using the flag. Setting it and then getting it back again doesn’t accomplish anything. You need to see if the flag is set and then take the appropriate action. You will need to do something like this:

export function button1_click_(event) {
let buttonClicked=local.getItem('button_clicked');
if (buttonClicked !== 'yes') { 
   local.setItem('button_clicked', 'yes');
   let progress = Number(local.getItem('progress')) + 5;
   $w('#progressBar1').value = progress;
   local.setItem('progress', $w('#progressBar1').value + '');
}
wixLocation.to("/NextLevel");
}

Disclaimer: I haven’t tested this code. It is just for illustration.

You will need to familiarize yourself with basic coding concepts to accomplish what you want. There are a wealth of Javascript coding sites which will help you learn Javascript from basic to advanced -Javascript.infois a good one. The Corvid Resources page provides tutorials, examples, and articles on getting the most out of Corvid. Good luck and have fun.