Click/Tap Counter

How-to Discussions
1

Hi! So I’m still getting used to both Fuse & Javascript and I just need a bit of help. I’m currently trying to make a Tap Counter where it counts how many times you’ve clicked on the button. This is my code so far, but it isn’t working and I’m assuming it’s my JavaScript. If you have any tips, resources or examples please send them my way!

<StackPanel Alignment="VerticalCenter">
  <Text Value="1" Alignment="Center" Padding="15"></Text>
<Button Text="Tap" Clicked="{buttonClicked}"/>
</StackPanel>

Here’s the JavaScript:

function buttonClicked() {
  Value = Observable(1) + 1;
}
module.exports = {
  homeClicked: homeClicked,
  buttonClicked: buttonClicked,
}
2

So what happens in your buttonClicked() function currently is that it creates a new local variable Value, the value of which is an observable one, plus one. Which makes no sense.

Instead, you should have something like this:

var Observable = require("FuseJS/Observable");
var clickCount = Observable(0); // this variable is local to the viewmodel scope, not function

function buttonClicked() {
    clickCount.value++; // this simply increments the observable value of that variable
}

module.exports = {
    clickCount: clickCount, // export this so that you can show it in UX
    buttonClicked: buttonClicked
};

Hope this helps!