Change Sprite Image on Click

[Sagrawal8]

I have a sprite in one of my apps and I want it to costumes on click.

Here is the code I have so far:

In the widgets.gui section ...

<symbol id="frames" href="#sprite-image">
  <animate id="anim" attributeName="value" begin="enable"
    from="1" to="4" dur="0.3" repeatCount="indefinite" />
  <image href="h1-frame_1.png" width="25%" height="20%" x="165" y="187" />
</symbol>

In the index.js section ...

const myAnimation = document.getElementById("myAnimation");
myAnimation.animate("enable");

Basically, when the screen is clicked, I want the h1-frame_1.png to change to h2-frame_1.png, and then with another click, it changes back to h1-frame_1.png, etc.

I have not figured out a way to do so yet. Any suggestions?

[Gondwana]

Give the <image> an id, use getElementById() on it in JS, then change .href on that object in your onclick() handler or equivalent.

[Sagrawal8]

---

@Gondwana wrote:

Give the <image> an id, use getElementById() on it in JS, then change .href on that object in your onclick() handler or equivalent.

---

Thank you so much. Would you mind giving me the code fully written out? I am not a great programmer, so I am not quite sure how to do so.

[Sagrawal8]

I have been fiddling around on the Fitbit Studio, but I have had no luck with being able to change my sprite image on click. I was wondering if anyone else has any suggestions. Thanks in advance.

[Sagrawal8]

I finally figured out how to give my <image> an id, use the getElementById() on it in JS, but I am unable to register that the <image> has been clicked, let alone change the href. This is the code I have so far in the index.js file:

import * as document from "document";

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

sprite("click", (evt) => {
  console.log("Clicked!");
});

 And this is the code I have in the widgets.gui file:

<image id="sprite" href="frame_1.png" width="25%" height="20%" x="165" y="182" />

 Any suggestions?

[Gondwana]

In your <image>, try including pointer-events="visible"

[Sagrawal8]

Thank you; that solved the issue of the clicks not registering. I then figured out how to change the .href, but I want the following section of code to loop so that the user can toggle back and forth between the two costumes.

sprite.addEventListener("click", (evt) => {
  console.log("Clicked");
  sprite.image = "s2-frame_1.png";
  sprite.addEventListener("click", (evt) => {
    console.log("Clicked");
    sprite.image = "s1-frame_1.png";
});
});

Any suggestions?

[Gondwana]

Only add ONE listener; otherwise you'll have a chain of them, all of which will be called when the event occurs.

A lazy way to do it would be to check the filename currently assigned to the .href, and assign the other filename. There would be more efficient ways, but that should do.

[Sagrawal8]

If I get rid of one listeners, my sprite is even less toggleable. Also, if I wanted to check the filename currently assigned to the .href, and assign the other filename, how would I go about doing so?

[Sagrawal8 · Accepted solution]

Never mind. I figured out how to make my sprite toggleable. For those curious, the code is below.

index.js:

import * as document from "document";
const sprite = document.getElementById("sprite");
sprite.addEventListener("click", (evt) => {
  if (sprite.href === "s1-frame_1.png" || sprite.href === "s1-frame_2.png" || sprite.href === "s1-frame_3.png" || sprite.href === "s1-frame_4.png") {
  sprite.href = "s2-frame_1.png";    
  } else {
  sprite.href = "s1-frame_1.png";    
  }  
})

widgets.gui:

<image id="sprite" href="s1-frame_1.png" width="25%" height="20%" x="165" y="182" pointer-events="visible"/>