12-20-2017 21:00
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

12-20-2017 21:00
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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?
Answered! Go to the Best Answer.

Accepted Solutions
12-20-2017 22:01
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


12-20-2017 22:01
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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.
Gondwana Software

12-20-2017 21:20
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


12-20-2017 21:20
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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
Gondwana Software

12-20-2017 21:31
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

12-20-2017 21:31
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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?

12-20-2017 22:01
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


12-20-2017 22:01
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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.
Gondwana Software

12-20-2017 22:54
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

12-20-2017 22:54
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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.
.

12-20-2017 23:40
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


12-20-2017 23:40
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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
Gondwana Software

12-21-2017 20:56
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

12-21-2017 20:56
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Okay - that is really much neater - I feel such a Newbie

12-21-2017 21:29
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


12-21-2017 21:29
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Bah; it's called learning. 🙂
Gondwana Software

