trying to use JavaScript but failing successfully

[cynderthekitsune]

what i mean is, every time i've tried using JS it never works for some reason. and honestly i'm kinda hopeless at JavaScript anyways...

one of which i took from the source code of someone's site, in which it's a button to pause all the GIFs on the site. i've wanted it for accessibility purposes, especially since sometimes i myself wanna look at it without being overstimulated, plus in general i've been looking to make my site more accessible! ( ˙꒳​˙)
but nope, it doesn't work at all!! 

so i've put the <script> thing in both the way they did it, and then into the header, same thing.
i'm hosting on Nekoweb so i'm starting to second-guess myself.

the code for said button is the exact same as the original's:

Code

<button onclick="freezegifs()" type="button">Pause gifs</button>

and this is the <script> part:

Code

<script src="https://cynderthekitsune.nekoweb.org/meta%2Fjs/pause.js"></script>

and this is the code in the JavaScript file it's the same as the original:

Code

function freezegifs(){var e=document.querySelectorAll(".freeze img, img.freeze");document.querySelector("html").classList.add("pausebg");for(var r=0;r<e.length;r++)e[r].src=e[r].src.slice(0,-3)+"png"}function resumegifs(){var e=document.querySelectorAll(".freeze img, img.freeze");document.querySelector("html").classList.remove("pausebg");for(var r=0;r<e.length;r++)e[r].src=e[r].src.slice(0,-3)+"gif"}

the exact same as the original's.

don't worry the original's was under Public Domain and she was fine with this (;^_^)
sorry i'm just really stressed at the moment... well, it's okay. i'm just new to JavaScript and have no idea what i'm doing but i think it's right.
the button's in the sidebar, and it's on this link (that i've tried it on): https://cynderthekitsune.nekoweb.org/buttons

[Kolo]

It looks like this script is looking for all images with a class of "freeze" assigned to it, and then replacing the source image .gif with a same-name .png in the same folder (and reversing this process to "unpause"). That means:

1. You must add class="freeze" onto all of your GIF buttons
2. You must manually create a static PNG file for each of the images, ensure it has the same name as its GIF counterpart, and upload it into the same folder

From a quick check, I didn't see the "freeze" class on any of your buttons.

I believe this is the same script you're using; this page has a bit more of a robust tutorial.

[cynderthekitsune]

It looks like this script is looking for all images with a class of "freeze" assigned to it, and then replacing the source image .gif with a same-name .png in the same folder (and reversing this process to "unpause"). That means:

1. You must add class="freeze" onto all of your GIF buttons
2. You must manually create a static PNG file for each of the images, ensure it has the same name as its GIF counterpart, and upload it into the same folder

From a quick check, I didn't see the "freeze" class on any of your buttons.

I believe this is the same script you're using; this page has a bit more of a robust tutorial.

yeah, thanks actually.
though i did try all exactly that, it still didn't work?

in examples here: https://cynderthekitsune.nekoweb.org/profile
at the bottom of the page, i've done so with one of the buttons (the Teto button) and added

Code

class="freeze"

to it, still doesn't do anything..

the image attached too, the images are the exact same name, just different file extension

[Kolo]

yeah, thanks actually.
though i did try all exactly that, it still didn't work?

in examples here: https://cynderthekitsune.nekoweb.org/profile
at the bottom of the page, i've done so with one of the buttons (the Teto button) and added

Code

class="freeze"

to it, still doesn't do anything..

the image attached too, the images are the exact same name, just different file extension

Thank you! Sending this example helps a lot :)

I can see in the inspect element that, when the button is pressed, your Teto button correctly becomes a PNG. However, when I view the PNG in my browser, it still plays the animation like it is still a GIF (how bizarre!). Try replacing your Teto button in your folder with this file, hard-refresh your site and the button, and let's see if that works.

[cynderthekitsune]

aaa yes thank you!! it works now!

it's an animated PNG (yes, PNGs can be animated) but i opened it in a basic MS Paint-like app (it doesn't support animated images at all) and reuploaded it, then cleared cache (hard refreshed)

[Kolo]

Glad to hear that it worked!! Hopefully it stays that way!