I am attempting to add a dropdown for mobile that gets shown when you click on an SVG. The problem is the SVG is stored in a seperate file.
This is what I am doing to get the SVG into my document.

<object type="image/svg+xml" data="./media/svg/moon.svg" id="moon"></object>

When I realized that my onclick wasn’t working because the object tag only renders the seperate file, instead of taking its place, so I attempted to inject an onclick directly into the SVG tag. Then, when that didn’t work I realized the object tag doesn’t pass through javascript so I injected a script tag. When that didn’t work because it was still being rendered in another file and the document object wasnt being passed through I attempted to get the document file passed through. But nothing worked. I resolved to copy-pasting the SVG tag directly into the main file (instead of using ) and that worked. But I would like to continue to use different files as to ensure my index.html file remains uncluttered.
This is the final js I ended up with:

function svgInject(objectId, layerId, attr, val, post) {
    svg = document.getElementById(objectId).contentDocument.getElementById(layerId);
    svg.setAttribute(attr, val)
    script = document.createElement("script");
    script.setAttribute('src', '/js/script.js');
    script.setAttribute('type', 'text/javascript');
    svg.append(script);
    if (post === true) {
        console.log(this.document.getElementById('moonMenu').contentDocument.getElementById('moon'));
    };
};
function menuCheck() {
    // console.log(main.document)
    // console.log(document)
    toggle = document.getElementById('toggle1');
    console.log(toggle)

    if (toggle.checked === true){toggle.checked = false} else {toggle.checked = true};
};
svgInject('moonMenu', 'moon', 'onclick', 'menuCheck()');