Onclick works in Emulator but not on watch

[4IsDesign]

Not sure what I am missing but When I run my watchface in the emulator I can click and change the stats as desired, but when I sideload or install the watchface to my device I do not get any of the stats.  Here is a snippet of my code with the section in question: 

Index.js

//Change Stats on screen tap

let clickbackground = document.getElementById("clickbg");
var stats = [
"steps",
"active",
"distance",
"floors",
"cals"
]
var stat = 0;

function updateStatData() {
if (display.on){
let statsLabel = document.getElementById("statsLabel");

switch (stats[stat]){
case "steps":
statsLabel.text = `${today.adjusted.steps ? today.adjusted.steps.toLocaleString(): 0 } steps`;
break;
case "active":
statsLabel.text = `${today.adjusted.activeMinutes ? today.adjusted.activeMinutes.toLocaleString() : 0} active`;
break;
case "distance":
if (units.distance == "us")
statsLabel.text = `${today.adjusted.distance ? util.round2(today.adjusted.distance * 0.000621371) : 0 } miles`;
else
statsLabel.text = `${today.adjusted.distance ? util.round2(today.adjusted.distance * 0.001) : 0 } km`;
break;
case "floors":
statsLabel.text = `${today.adjusted.elevationGain ? today.adjusted.elevationGain : 0} floors`;
break;
case "cals":
statsLabel.text = `${today.adjusted.calories ? today.adjusted.calories.toLocaleString() : 0} cals`;
break;
}
}
}
clickbackground.onclick = function(evt) {
console.log("Click " + stat);
if (stat < stats.length-1)
stat++;
else
stat = 0;
console.log(stats[stat]);
}

setInterval(updateStatData, 500);

Index.gui

<svg viewport-fill="#ffffff">
<rect id="background" width="100%" height="100%" fill="#f48137" />
<image id="WatchFace" class="WatchFace" href="background.png" />
<text id="statsLabel" />
<text id="date1" class="date1" />
<text id="date2" class="date2" />
<text id="heartrateValue" class="heartrateValue"></text>
<text id="battery" class="battery"></text>
<text id="12" class="12">12</text>
<text id="3" class="3">3</text>
<text id="6" class="6">6</text>
<text id="9" class="9">9</text>
<g id="hours" pointer-events="visible" transform="translate(50%,50%)">
<rect x="$-4" y="-55" width="6" height="55" fill="#1a1b1d" />
<rect x="$-4" y="-50" width="3" height="20" fill="#b0e4e5" />
</g>
<g id="mins" pointer-events="visible" transform="translate(50%,50%)">
<rect x="-3" y="-85" width="6" height="85" fill="#1a1b1d" />
<rect x="-2" y="-78" width="3" height="35" fill="#b0e4e5" />
</g>
<g id="secs" pointer-events="visible" transform="translate(50%,50%)">
<rect x="$-2" y="-90" width="3" height="120" fill="#92f2f3" />
</g>
<circle cx="50%" cy="50%" r="6" fill="#92f2f3" />
<circle cx="50%" cy="50%" r="2" fill="#1a1b1d" />
<rect id="clickbg" pointer-events="visible"/>
</svg>

Styles.css

#clickbg {
width: 100%;
height: 100%;
fill: black;
opacity: 0
}
#statsLabel {
font-size: 20;
font-family: Seville-Bold;
text-length: 20;
text-anchor: middle;
x: 50%;
y: 9%;
fill: white;
}

[JonFitbit]

It's probably permissions, the simulator doesn't currently check for permissions, but the device does.

https://dev.fitbit.com/build/guides/permissions/

Also, don't use setInterval(), it will drain the battery. Update your UI in the clock tick event, and it will only update when the screen is on.

[4IsDesign · Accepted solution]

Jon, Thanks for the Reply.  Turns out it was not permissions after all.  Once I removed the setInterval() parameter and updated everything in the ontick evt it stopped working in the Emulator as well.  Here is what I did to fix the issue.  Green = added or moved, Red = deleted.

Index.js

let statsLabel = document.getElementById("statsLabel");

//Change Stats on screen tap

let clickbackground = document.getElementById("clickbg");
function stats() = {

return [
"steps",
"active",
"distance",
"floors",
"cals"
]

}
var stat = 0;

function updateStatData() {
if (display.on){
let statsLabel = document.getElementById("statsLabel");

switch (stats()[stat]){
case "steps":
statsLabel.text = `${today.adjusted.steps ? today.adjusted.steps.toLocaleString(): 0 } steps`;
break;
case "active":
statsLabel.text = `${today.adjusted.activeMinutes ? today.adjusted.activeMinutes.toLocaleString() : 0} active`;
break;
case "distance":
if (units.distance == "us")
statsLabel.text = `${today.adjusted.distance ? util.round2(today.adjusted.distance * 0.000621371) : 0 } miles`;
else
statsLabel.text = `${today.adjusted.distance ? util.round2(today.adjusted.distance * 0.001) : 0 } km`;
break;
case "floors":
statsLabel.text = `${today.adjusted.elevationGain ? today.adjusted.elevationGain : 0} floors`;
break;
case "cals":
statsLabel.text = `${today.adjusted.calories ? today.adjusted.calories.toLocaleString() : 0} cals`;
break;
}
}
}
clickbackground.onclick = function(evt) {
console.log("Click " + stat);
if (stat < stats().length-1)
stat++;
else
stat = 0;
console.log(stats()[stat]);
}

setInterval(updateStatData, 500);

clock.ontick = (evt) => {
updateClock();
updateStatData();
}

Everything is working as expected now.