HTML OnClick image source changes in web, but not mobile

Question

I'm working in Wordpress with the Elementor block builder and I'm trying to have a .gif image switch sources to another .gif image. The OnClick event I have works perfectly fine via web, but not mobile. I've searched endlessly and have made sure another element is not blocking the touch event, added OnTouch, etc but to no avail.

<img src="https://lowlifeclothing.co/wp-content/uploads/2020/09/Loop1.gif"
onClick="this.src='https://lowlifeclothing.co/wp-content/uploads/2020/09/Loop1D.gif'">

@luekbaja whoops, never mind. I posted the comment to the wrong topic. Sorry. — Tewdyn, Sep 25 '20 at 21:44

score -1 · Accepted Answer · answered Sep 25 '20 at 21:08

-1

Change onClick to onclick:

<img src="https://lowlifeclothing.co/wp-content/uploads/2020/09/Loop1.gif"
onclick="this.src='https://lowlifeclothing.co/wp-content/uploads/2020/09/Loop1D.gif'">

I also recommend not using the onclick attribute and instead using addEventListener for these reasons.

document.getElementById("image").addEventListener("click", function() {
  this.src = "https://lowlifeclothing.co/wp-content/uploads/2020/09/Loop1D.gif";
});

<img src="https://lowlifeclothing.co/wp-content/uploads/2020/09/Loop1.gif" id="image">

answered Sep 25 '20 at 21:08

luek baja

1,249
5
17

This worked perfectly! Thank you. The only thing now is that the .gif repeats slightly upon being clicked. – hunnaharms Sep 25 '20 at 21:33
@hunnaharms You know you can mark an answer as correct if it helped... – luek baja Sep 25 '20 at 21:35

HTML OnClick image source changes in web, but not mobile

1 Answers1