wakizashi | chorded keeb | Parser library

Your image is not updating because you inserted a "Fandom" tag to replace the HTML of your element.

It was a nice idea at first, but you need to know that, let's say "Fandom pages", are certainly converted to HTML at server-side, and that your browser receive only the HTML. I am not really sure of what I just said, but I guess that's the process.

Explained simply, when you add "Fandom" tags after page loading, there are not translated to HTML, because the template engine is not called.

So, in order to update your image, there is probably a tag in the element that gets the event listener. It is the [src] attribute of that image element you need to update.

After looking to your page DOM tree, I think you'll have to find out the correct image URLs by yourself.

Now, to answer your question:

• You can get the value of an element's attribute with HTMLElement#getAttribute.
• You can update an element attribute's value with HTMLElement#setAttribute.

And with a if statement, you can check which picture is currently displayed, then choose the picture to show instead.

In order to have a unique function for all your filters, just make it and use it in your event listener.