Change the color of a buttons the text in an if statement

[philb1972]

How do I change the color of a buttons text with an if statement:

if I try accessing the color as:

mybutton.style.fill = "blue"

it fills the button background.

As a newbie where do I find the attributes I can change?

[Gondwana]

You probably need to get access to the #text subelement. Dunno if this would be mybutton.text or a separate findElementById(). See https://dev.fitbit.com/guides/components/buttons/#basic-button

Once you've got access to the text element, you should be able to mess with its style as per https://dev.fitbit.com/guides/user-interface/svg/#text

[philb1972]

Hi,

Your post was helpful - but how do I access the text sub-element.  I have tried a few possibilities but not getting anywhere?

Any other help?

[Gondwana · Accepted solution]

let mybutton = document.getElementById("mybutton");
let mybuttontext = mybutton.getElementById("text");
mybuttontext.style.fill = "blue";
mybutton.onactivate = function(evt) {
  console.log("CLICKED!");
  mybuttontext.style.fill = "blue";
}

Interestingly, without the second instance of

mybuttontext.style.fill = "blue";

the button reverts to its default style. Kinda seems like a bug.

[philb1972]

Many thanks - that is it. 

A great help.  I have set all my stats etc on a clock-face with big type on a black button because I cannot see the small typeface without my glasses.  I have coloured each stat so I can tell the difference (I cannot see the icons either).  Pressing the (black) button scrolls though them.

.

[Gondwana]

Good idea! It's an 'accessibility' clockface.

Perhaps you didn't even need to use buttons. You can get touch events for most elements, I think: https://dev.fitbit.com/guides/user-interface/javascript/#click-event

[philb1972]

Okay - that is really much neater - I feel such a Newbie

[Gondwana]

Bah; it's called learning. 🙂