12h Format does not work on FitBit OS Simulator

[Xbroogw1]

I've am trying to create a clockface, but have run into a problem with the FitBit OS Simulator. When trying to change the time from 24h to 12h, the time in the simulator stays on 24h. The AM/PM label appears, but the time does not change. My code is as follows:

import clock from "clock";
import document from "document";
import { preferences } from "user-settings";
import * as util from "../common/utils";
import { goals, today } from "user-activity";

import * as fs from "fs";
import { HeartRateSensor } from "heart-rate";
import { me as appbit } from "appbit";
import { battery } from "power";

console.log((goals.steps || 0 ) + " steps");
console.log((today.local.steps || 0 ) + " steps");
// Update the clock every second
clock.granularity = "seconds";

// Get a handle on the <text> element
const hoursLabel = document.getElementById("hoursLabel");
const minutesLabel = document.getElementById("minutesLabel");
const secondsLabel = document.getElementById("secondsLabel");
const timeLabel = document.getElementById("timeLabel");
const ampmLabel = document.getElementById("ampmLabel");
const dayLabel = document.getElementById("dayLabel");
const monthLabel = document.getElementById("monthLabel");
const heartRateLabel = document.getElementById("heartRateLabel");
const batteryLabel = document.getElementById("batteryLabel");

// Update the <text> element every tick with the current time
clock.ontick = (evt) => {
  batteryLabel.text = Math.floor(battery.chargeLevel) + "%";
  showDate(evt);
  let today = evt.date;
  let hours = today.getHours();
  if (preferences.clockDisplay === "12h") {
    // 12h format
    if(hours / 12 > 0) {
      ampmLabel.text = "PM";
    } else {
      ampmLabel.text = "AM";
    }
    hours = hours % 12 || 12;
  } else {
    // 24h format
    ampmLabel.text = "";
    hours = util.zeroPad(hours);
  }
  let hours = util.zeroPad(today.getHours());
  let mins = util.zeroPad(today.getMinutes());
  let sec = util.zeroPad(today.getSeconds());
  
  hoursLabel.text = `${hours}`;
  minutesLabel.text = `${mins}`;
  secondsLabel.text = `${sec}`;
  timeLabel.text = `${hours}:${mins}`;
}

// Show Date
function showDate(evt){
  let today = evt.date;
  let monthnum = today.getMonth();
  let day = today.getDate();
  let month = new Array();
  month[0] = "Jan";
  month[1] = "Feb";
  month[2] = "Mar";
  month[3] = "Apr";
  month[4] = "May";
  month[5] = "Jun";
  month[6] = "Jul";
  month[7] = "Aug";
  month[8] = "Sep";
  month[9] = "Oct";
  month[10] = "Nov";
  month[11] = "Dec";
 let monthname = month[monthnum];
  monthLabel.text = `${monthname}`;
  dayLabel.text = `${day}`;
}

// Steps Counter
let steps = document.getElementById("steps");
steps.text = today.local.steps || 0;

setInterval(() => {
  steps.text = today.local.steps || 0;
}, 3000 );

let arc = document.getElementById("arc-fg");
let anglePercentage = (today.local.steps || 0) / (goals.steps || 0);
let angle = 360 * anglePercentage;
arc.sweepAngle = angle;

// Heart Rate Sensor
if (HeartRateSensor) {
  const hrm = new HeartRateSensor({ frequency: 1 });
  hrm.addEventListener("reading", () => {
    console.log(`Current heart rate: ${hrm.heartRate}`);
    heartRateLabel.text = `${hrm.heartRate}`;
  });
  hrm.start();
}

Am I missing something to get the time to switch from 24h to 12h? The code seems to work as the AM/PM label appears when I switch the time in the simulator.

[Gondwana]

You seem to be redefining 'hours' (and a few other variables). Be very careful when pasting code together.

[Xbroogw1]

Gondwana. Thanks. You pointed me to the right direction and I've fixed the issue. As you said, I was redefinig the hours variable. That code was left in by mistake as I changed the way I wanted the time to display.

Thanks for the advice.