Cannot find an element via JavaScript which does exist

Development

AI-generated summary

The user darkpixlz is having trouble accessing an element with JavaScript, despite it existing on the page. awesomerobot suggested that the issue is due to the script loading before the page is fully rendered, and provided an alternative solution using api.onPageChange. This solution uses the router:main to check if the current route is a user profile page, and then sets a custom property --profile-bg-img with the user’s profile background image URL.

awesomerobot also noted that this solution may not persist if the user navigates away from the profile page and refreshes.

After implementing the solution, darkpixlz reported that it worked, but had issues with the CSS. awesomerobot suggested adding the url() part to the custom property value to fix the issue.

1

Hello,

I tried making a script to grab the background-image attribute from the profile header, then save it as a root variable. However, my code does not work. I tried many solutions, some of them included AI, which just reverted the plugin version and did not help.

This is the code:

<script type="text/discourse-plugin" version="0.9">
    const setRootBgImage = () => {
        try {
            const el = document.getElementByClassName('.user-profile-image');
            if (el) {
                const bgImage = window.getComputedStyle(el).getPropertyValue('background-image');
                document.documentElement.style.setProperty('--profile-bg-img', bgImage);
            }
        } catch (error) {
            console.error(error);
            debugger; //when run, this always comes up no matter what and displays the same error
        }

    };

    const shouldRun = () => {
        return window.location.pathname.startsWith('/u/');
    };

    const init = () => {
        if (shouldRun()) {
            setRootBgImage();
        }
    };

    document.addEventListener('DOMContentLoaded', init);

    api.onPageChange(() => {
        init();
    });
</script>

Thank you.

2

Your script is loading before most of the page is rendered, so it can’t find the element…

This should get you what you’re looking for…

<script type="text/discourse-plugin" version="0.9">
api.onPageChange(() => {
  let currentRouteParent = api.container.lookup("router:main").currentRoute?.parent;
    if (currentRouteParent.name.includes("user")) {
        let userBg = currentRouteParent.attributes.profile_background_upload_url;

        if (userBg) {
            document.documentElement.style.setProperty('--profile-bg-img', userBg);
        } else {
            document.documentElement.style.removeProperty('--profile-bg-img');
      }
    }
});
</script>

I assume you’re trying to reuse the user’s profile background on the profile page somewhere? otherwise this won’t stick around if you navigate away from a profile and refresh the page…

3

That worked! Seems like ths css doesn’t though.
image

4

Ah right, what you’ll want to do is add the url() part to the custom property value… so something like:

document.documentElement.style.setProperty('--profile-bg-img', `url(${userBg})`);