05-26-2020 16:28
05-26-2020 16:28
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?
Answered! Go to the Best Answer.
05-27-2020 04:01
05-27-2020 04:01
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`;
});
05-27-2020 04:01
05-27-2020 04:01
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`;
});
05-27-2020 05:35
05-27-2020 05:35
Thanks. I'm pretty sure this will work, but if I have combo buttons, will this work too?
05-27-2020 09:59
05-27-2020 09:59
When I threw this into a test app (after it not working in mine), I couldn't get it working. Any ideas?
05-27-2020 10:26 - edited 05-27-2020 10:33
05-27-2020 10:26 - edited 05-27-2020 10:33
@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.
05-27-2020 10:34
05-27-2020 10:34
Thanks. This helped me get it to work.
05-27-2020 12:00
05-27-2020 12:00
Excellent. I am glad it helped.