How to use classList.toggle for <image id="heartRateIcon"/>

[pitang1965]

Hello.

I would like to have a heart beat animation on a clock face.

For example, the following code is working.

<text id="heartRateText">---</text>
:
:
const heartRateText = document.getElementById("heartRateText");
:
:
heartRateText.text = hrm.heartRate;

However, I can not add or remove class to the following heartRateIcon for heart beat animation.

const heartRateIcon = document.getElementById("heartRateIcon");

Could you teach me how to change the state of objects?

[Gondwana]

Assuming the icon is an image, change the image's href. You're right that fitbit doesn't let us change classes at run time.

[pitang1965]

Thank you for your reply.

My code was the following:

/* index.gui */
<image id="activityIcon"/>
:
:
/* styles.css */
#heartRateIcon {
  x: 21;
  y: 75%;
  width: 48;
  height: 48;
  href: "stat_hr_solid_48px.png";
  fill: red;
}

[pitang1965 · Accepted solution]

I found sample SDK version of the "Moment" clock face by Fitbit.