How to have changing numbers in app?

[MattMack]

I am trying to make a easy counting app, but I do not know how to make it so that when a user presses a button, say button bottom right (btnBR), I want the number to go down, and if they press top button (btnTR), the score goes up. Can anyone tell me how to do this?

[JonFitbit · Accepted solution]

You need a <text> field and a button, apply some styling etc too. See https://dev.fitbit.com/build/guides/user-interface/svg-components/buttons/

<text id="mylabel" />
<use id="mybutton" href="#square-button" y="5" fill="fb-red">
  <set href="#text" attributeName="text-buffer" to="Click Me!" />
</use>

then code would be something like:

import document from "document";

const mylabel = document.getElementById("mylabel");
const mybutton = document.getElementById("mybutton");

const counter = 0;

mybutton.addEventListener("click", () => {
  counter = counter + 1;
  mylabel.text = `${counter} presses`;
});

[MattMack]

Thanks. I'm pretty sure this will work, but if I have combo buttons, will this work too?

[MattMack]

When I threw this into a test app (after it not working in mine), I couldn't get it working. Any ideas?

[LekoFraggle]

@JonFitbit solution should work (it is similar to what I am using in my app).  What happens if instead of updating the textview, you print the value to console? Put this in the onButton Clicked event handler.

console.log(`The current count is... ${counter}`);

Edit:  After looking again, I realized, I created the string differently.  If the above works, you could try this...

mylabel.text = counter + " presses.";

It should be noted that the way @JonFitbit did it should not only work, it should be better to construct a new sting than concatenate an old one like this, but it does seem to work for me.

[MattMack]

Thanks. This helped me get it to work.

[LekoFraggle]

Excellent.  I am glad it helped.