SVG - Change fill color on button click

I am having trouble changing the fill colors within my SVG image by button click. I have a button that should change the “.visor” object class to red but it isn’t working. I’ve tried changing the fill attribute directly and also tried adding another class to the object but nothing seems to be affecting it.

This is exactly what I’m trying to do: Edit fiddle - JSFiddle - Code Playground
For some reason can’t get it to implement and it’s probably something simple that I’m overlooking. This is what I have so far:

https://www.gormli.com/hat-maker


Here is my site Read-Only: [https://preview.webflow.com/preview/gormli?utm_medium=preview_link&utm_source=designer&utm_content=gormli&preview=d8bb37456571480db1697e6f2beea684&pageId=62e87702bdfe03547ec70ae5&workflow=preview][1]

It looks like I am able to change the fill color of the SVG paths if the SVG is directly in the embed - but not if I add the SVG into the embed as an object. Not sure why but it certainly would be better if I could just add the SVG as an object and also modify the paths with CSS.