onClick(event) with colour change

Ask the community
,
1

Hey everyone,

Sorry to be such a broken record, but I’m having a difficult time with changing (and reverting when something else is clicked) on a series of buttons.

I’ve tested out code from various other posts, but can’t seem to get it to work.

I’ve removed the extra code and this is what I have. Currently, there are 20 buttons that change a statebox. I was hoping to have it so when someone click on BDAR, it would stay the hover colour. Once someone clicks on BRREA, BDAR colour would revert back and the BRREA is then the selected colour.

Any help would be appreciated.

Thank you!

$w . onReady ( function () {
$w ( “#button4” ). onClick (( event ) => {
$w ( “#statebox8” ). changeState ( “BDAR” );
});
$w ( “#button5” ). onClick (( event ) => {
$w ( “#statebox8” ). changeState ( “BRREA” );
});
$w ( “#button6” ). onClick (( event ) => {
$w ( “#statebox8” ). changeState ( “CAOR” );
});
$w ( “#button7” ). onClick (( event ) => {
$w ( “#statebox8” ). changeState ( “GDAR” );
});
$w ( “#button8” ). onClick (( event ) => {
$w ( “#statebox8” ). changeState ( “HPAR” );
});
$w ( “#button9” ). onClick (( event ) => {
$w ( “#statebox8” ). changeState ( “KLREA” );
});
$w ( “#button10” ). onClick (( event ) => {
$w ( “#statebox8” ). changeState ( “KAREA” );
});
$w ( “#button11” ). onClick (( event ) => {
$w ( “#statebox8” ). changeState ( “KWAR” );
});
$w ( “#button12” ). onClick (( event ) => {
$w ( “#statebox8” ). changeState ( “LAR” );
});
$w ( “#button13” ). onClick (( event ) => {
$w ( “#statebox8” ). changeState ( “LSTAR” );
});
$w ( “#button14” ). onClick (( event ) => {
$w ( “#statebox8” ). changeState ( “NAR” );
});
$w ( “#button15” ). onClick (( event ) => {
$w ( “#statebox8” ). changeState ( “NBREB” );
});
$w ( “#button16” ). onClick (( event ) => {
$w ( “#statebox8” ). changeState ( “MREB” );
});
$w ( “#button17” ). onClick (( event ) => {
$w ( “#statebox8” ). changeState ( “OMDREB” );
});
$w ( “#button18” ). onClick (( event ) => {
$w ( “#statebox8” ). changeState ( “PKAR” );
});
$w ( “#button19” ). onClick (( event ) => {
$w ( “#statebox8” ). changeState ( “RAGBOS” );
});
$w ( “#button20” ). onClick (( event ) => {
$w ( “#statebox8” ). changeState ( “SDREB” );
});
$w ( “#button21” ). onClick (( event ) => {
$w ( “#statebox8” ). changeState ( “TDREB” );
});
$w ( “#button22” ). onClick (( event ) => {
$w ( “#statebox8” ). changeState ( “QDAR” );
});
$w ( “#button23” ). onClick (( event ) => {
$w ( “#statebox8” ). changeState ( “WIREB” );
});
});

2

Examine this example. The sections that you need to add at the beginning and end of the code have been added as comments. You’ll have to edit it to your own code. Good luck.

$w . onReady ( function () {

/*
const greenColor = “#D1D7B8” ; // For selected tab
const whiteColor = “#FFFFFF” ; // For other tabs

*/

$w ( '#medineIpegiButton' ). onClick (() => { 
    $w ( '#productCollection' ). changeState ( "medineIpegiCollection" ); 
}); 

$w ( '#pamukButton' ). onClick (() => { 
    $w ( '#productCollection' ). changeState ( "pamukCollection" ); 
}); 

$w ( '#penyeButton' ). onClick (() => { 
    $w ( '#productCollection' ). changeState ( "penyeCollection" ); 
}); 

 $w ( '#sifonButton' ). onClick (() => { 
    $w ( '#productCollection' ). changeState ( "sifonCollection" ); 
}); 

$w ( '#desenliButton' ). onClick (() => { 
    $w ( '#productCollection' ). changeState ( "desenliCollection" ); 
}); 

$w ( '#duzButton' ). onClick (() => { 
    $w ( '#productCollection' ). changeState ( "duzCollection" ); 
}); 

$w ( '#ipekButton' ). onClick (() => { 
    $w ( '#productCollection' ). changeState ( "ipekCollection" ); 
});

/*
$w ( “#productCollection” ). onChange (( event ) => {

    **const**  buttonNames  = [ "medineIpegi" ,  "pamuk" ,  "penye" ,  "sifon" ,  "desenli" ,  "duz" ]; 

    buttonNames . forEach ( buttonName  => { 
        **let**  button  =  $w ( "#"  +  buttonName  +  "Button" );  // e.g. "#pamukButton" 
        **let**  state  =  buttonName  +  "Collection" ;  // e.g. pamukCollection 

        **if**  ( event . target . currentState . id  ===  state ) { 
            button . style . backgroundColor  =  greenColor ;  
        }  **else**  { 
            button . style . backgroundColor  =  whiteColor ;  
        } 
    }); 
});

})

*/

3

Try this way…

$w.onReady(async function() {
  $w('Button').onClick((event)=>{
    let btnID = event.target.id; console.log("Button-ID: ", btnID);
    //-------------------------------------------------------
    switch(btnID) {
      case "button4": $w("#statebox8").changeState("BDAR");   break;
      case "button5": $w("#statebox8").changeState("BRREA");  break;
      case "button6": $w("#statebox8").changeState("CAOR");   break;
      case "button7": $w("#statebox8").changeState("GDAR");   break;
      case "button8": $w("#statebox8").changeState("HPAR");   break;
      case "button9": $w("#statebox8").changeState("KLREA");  break;
      default: // code block
    }
  });
});