I want to maintain color on clicked button

Ask the community
,
1

I want to make a button at the time of clicking keep the color of the selection until I click on

help me please!

2056×1200 472 KB

2

Do you mean to keep the color until you click it again or until you click another button?

3

until I click on another button…

4

@moises_tolki

function setButtonColor(button, opacity){
button.style.backgroundColor = `rgba(0,255,0,${opacity})`;
button.style.borderColor = `rgba(225,225,225,${(opacity + 1) % 2})`;
}

$w.onReady(function () {
 let buttonsToChange = [$w("#button1"), $w("#button2"), $w("#button3")];//put the relevant buttons here
    buttonsToChange.forEach(button => {
        setButtonColor(button, 0);
        button.onClick((event) => {
            buttonsToChange.forEach(b => {
                setButtonColor(b, 0);
            });
        setButtonColor(button, 1);
    })
    })
})
5

And first make sure (on the editor) that all your buttons do have background and border width.

6

@jonatandor35 I managed to do what you told me, but the buttons do not keep the color even though I attach the code you sent me, only the letters remain as you see in the video that I attached here …

I want the green to stay once click until you select another button …

This is my number in case you are able to call me and explain me via phone +1(829)585-9974 I live in the Dominican Republic.

I would be more than grateful!

7

@moises_tolki see here:
https://jonatandor35.wixsite.com/test/button-opacity
It’s the same code I posted above and it works as expected.

If I had to guess, I would say that you didn’t set the background on the editor:
on the editor > click each button > Design > customize Design > Fill Color & Opacity > Scroll background to 100%

8

and by the way, if you don’t mind having the borders even when it’s highlighted, then you can just set on the editor the design of the “disabled” state to be highlighted, then the code will be shorter as all you have to do is to disable the clicked button and enable all the others.

9

@jonatandor35 Yes, I want it as the example you sent me, but …

I showed you another video showing you that I have done everything as you have told me …

look to see if in the video you can find where uh failed please

and thanks again for your excellent attention

10

@moises_tolki you have to scroll the background to 100% for all the button and in regular state not only in “hover” state, and to leave it like that.

11

Is it possible to switch the color of the text inside the button on click and not just the button color?

12

Yes. It is. add to the setButtonColor () function:

button.style.color = "rgba(255,0,0,1)";
13

Thanks for fast reply! With the function below my text is white on load with white background. However, I would like the text to be black on load and only get white on “click”. Is it possible? thanks again.

function setButtonColor(button, opacity){
button.style.backgroundColor = rgba( 0 , 0 , 0 ,${opacity});
button.style.borderColor = rgba( 0 , 0 , 0 ,${(opacity + 1 ) % 2 });
button.style.color = “rgba(255,255,255,1)” ;}

$w.onReady( function () {
let buttonsToChange = [$w( “#button1” ), $w( “#button2” )]; //put the relevant buttons here
buttonsToChange.forEach(button => {
setButtonColor(button, 0 );
button.onClick((event) => {
buttonsToChange.forEach(b => {
setButtonColor(b, 0 );
});
setButtonColor(button, 1 );
})
})
})

14

Of course it is.

function setButtonColor(button, opacity){
button.style.backgroundColor = `rgba(0,0,0,${opacity})`;
button.style.borderColor = `rgba(0,0,0,${(opacity + 1) % 2})`;
opacity === 0? button.style.color = "#000000" : button.style.color = "#ffffff";}

$w.onReady(function () {
 let buttonsToChange = [$w("#button1"), $w("#button2")];//put the relevant buttons here
    buttonsToChange.forEach(button => {
        setButtonColor(button, 0);
        button.onClick((event) => {
            buttonsToChange.forEach(b => {
                setButtonColor(b, 0);
            });
        setButtonColor(button, 1);
    })
    })
})
15

Perfect, many thanks!

16

You’re welcome :slight_smile:

17

It’s an old thread that has been answered. I’m closing it. If any one has further questions, please open a new post.