Multi-State-Box Button Color

Ask the community
1

Hi together,

I running the following code for a Tab Menu. The Code runs perfectly on Wix Editor but not on Editor X. Can someone Help?

$w . onReady ( function () {

const  blackColor  =  "#000000" ; 
const  textColorActive  =  "#FFFFFF" ; 

const  whiteColor  =  "#FFFFFF" ; 
const  textColorInactive  =  "#000000" ; 


$w ( '#firstButton' ). onClick (() => { 
    $w ( '#stateElementId' ). changeState ( "firstState" ); 
}); 

$w ( '#secondButton' ). onClick (() => { 
    $w ( '#stateElementId' ). changeState ( "secondState" ); 
}); 

$w ( '#thirdButton' ). onClick (() => { 
    $w ( '#stateElementId' ). changeState ( "thirdState" ); 
}); 

$w ( '#fourthButton' ). onClick (() => { 
    $w ( '#stateElementId' ). changeState ( "fourthState" ); 
}); 

$w ( "#stateElementId" ). onChange (( event ) => { 

    const  buttonNames  = [ "first" ,  "second" ,  "third" ,  "fourth" ]; 

    buttonNames . forEach ( buttonName  => { 
        let  button  =  $w ( "#"  +  buttonName  +  "Button" ); 
        let  state  =  buttonName  +  "State" ; 

        if  ( event . target . currentState . id  ===  state ) { 
            button . style . backgroundColor  =  blackColor ; 
            button . style . color  =  textColorActive ; 
        }  **else**  { 
            button . style . backgroundColor  =  whiteColor ; 
            button . style . color  =  textColorInactive ; 
        } 
    }); 
});

});

The Code comes fro this tutorial: https://www.youtube.com/watch?v=iSKenmKqtmo

Thanks for helping😊

2

Hi @stschuele ,

Can you post the page url that contains this page?

Also, do you see any error on the console?

3

Hi, I’ve fixed it.

if you run this code on preview mode, it doesn’t work. After I published the side, it works.

so everything is fine.:+1: