Change button color when clicked on Dynamic Page

[kyle-kaio-rodrigo]

I have a dynamic page that is filtering itens, example when I select or click in the button1 that show me a category of products in my gallery.
I want to everytime that button1 is clicked it changes color, that way the user can see which button/category is selected.

[anatarad]

I have the same issue. Anyone???

[alexander-rudyuk-1]

+1, please help )

[mert-omer-ozbilgin]

Can you visualize it …
What is the element that you want it’s color to change?

You can duplicate whatever that item is and change the design of it and choose to show and hide by the clickevents you have.

[anatarad]

I’ve done it with 2 different buttons, one grey enabled upon load, one with blue disabled upon load.
for every pair of buttons i wrote this code

// This function makes the “button” be disabled (grey)
export function button28_click(event, $w) {
$w(“#button28”).hide();
$w(“#button34”).show();
}
// This function makes the “button” be enabled (blue)
export function button34_click(event, $w) {
$w(“#button34”).hide();
$w(“#button28”).show();

[mert-omer-ozbilgin]

You can enable and disable the button on it’s own
just use enable or disable instead showing and hiding 2 different buttons.
Just relate it on another event.

$w("#yourbuttonid").enable(); //enables it 
$w("#yourbuttonid").disable(); // disables it.

[anatarad]

I tried it. But if you disable the button, you cannot click it again… And I need my users to enable/disable it as much as they want

[mert-omer-ozbilgin]

Oh so it’s for enabling disabling some other thing…
But i still didn’t get what you are trying to achieve here

Showing another button to state an element is disabled
when it is the same element makes no sense at all

I’m sure there is a better way to do what you’re trying to achieve
Can you put a picture of it or a link if it’s live.

[anatarad]

Imagine 3 buttons: one for Adults, one for Children and one for Youth. I want the users to choose which is relevant by pressing those buttons. Once a button is pressed, it changes its color. When it’s not pressed, it’s grey and when it’s pressed it’s another color… say blue…
So it’s easy to visualize which buttons were pressed. Kind of like a check box but a different design for it.

I agree that there should be a better way to do it. I looked and looked and couldn’t find it. But what I did works fine for now.
Cheers

[mert-omer-ozbilgin]

That makes sense now.
I should sleep more

[andrew-kov]

Hi Mert ,
They want to achieve this thing:

This site created with Wix Code: https://www.unidraft.com/projects-en
Thread on the Forum: https://www.wix.com/code/home/forum/show-off-your-work/unidraft-website

[alexander-rudyuk-1]

Dear Andrew Kov,

yes, that’s exactly what i need!
do you have any ideas, how to do that?

BR,

[asa]

I solved it by choosing one of the menus that have design options for different designs for ‘regular’, ‘hover’ and ‘clicked’.

[asa]

Just need to add: I had simply hidden text (as menus are auto-generated) with white overlay that could be clicked and the color lit up from design options from menus when clicked, - but it’s a cumbersome solution (I’m only using it for a prototype for customer research, however I do want to test if that helps to navigate the search in that exact design format - so hoping Wix adds a features of buttons with design options for ‘regular’, ‘hover’ AND ‘clicked’ as for menus!)

[asa]

Another work-around is an Anchor Menu, also not ideal, but with some work you can give it another color when clicked.
(I’m fully aware none of these are good enough, but if you want to TEST the feature on customers, they work.)

[baztorres]

I solved this by attaching a function to the button click.
The function will find the element id and use that to get the element; a button.

Now we have the button element, we can mutate some properties as needed; see the docs of what you can change: https://www.wix.com/code/reference/$w.Button.html
In this case, we want to change the background and text colours. The style property holds these.

You need to have some logic of what state the button is in to determine how to affect the style.

Here’s what I wrote:

export function button_click(event) {
 let button = $w("#" + event.target.id)
 let borderColour = button.style.borderColor
 let colour = button.style.color

 if (isClicked(borderColour)) {
        setButtonColours(button, BLACK) 
    } else {
        setButtonColours(button, GREEN)
    }
}

function isClicked(borderColour) {
 return borderColour === GREEN
}

function setButtonColours(button, colour) {
    button.style.borderColor = colour;
    button.style.color = colour
}

[baztorres]

I think you could use the button events onMouseIn and onMouseOut to replicate hovering.

[rc-powers]

This code really helped me thank you anatarad!

[abhijeetpatil3000]

Here is how you can Change button color when clicked on Dynamic Page and create a tabbed activity using a M ultistate box
Firstly select the multistate box by clicking the Add+ button on Wix editor the select interactive and then select multi-state box

Then create 2 buttons for 2 states (You can also create more than 2 states the process remains the same) and write the below code in the code section

$w.onReady(function () {
 // TODO: write your page related code here...
    $w("#button1").onClick(() => {
        $w('#statebox8').changeState("State1");
        $w("#button1").disable();
        $w("#button2").enable();
    });
    $w("#button2").onClick(() => {
        $w('#statebox8').changeState("State2");
        $w("#button2").disable();
        $w("#button1").enable();
    });
});

Lastly, uncheck the enabled button (from the property panel) of the first button which will be shown in grey (Disabled) as shown in the image below so as to show the default state ie first state when the page is loaded.

[saulegrigiene]

nice, thank you.