# Cannot find an element via JavaScript which does exist

**URL:** https://meta.discourse.org/t/cannot-find-an-element-via-javascript-which-does-exist/257174
**Category:** Development
**Created:** [March 6, 2023, 1:29am UTC](https://meta.discourse.org/t/cannot-find-an-element-via-javascript-which-does-exist/257174 "2023-03-06T01:29:14Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![darkpixlz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkpixlz/32/549896_2.png) [@darkpixlz](https://meta.discourse.org/u/darkpixlz)
#### Post date: [March 6, 2023, 1:29am UTC](https://meta.discourse.org/t/cannot-find-an-element-via-javascript-which-does-exist/257174/1 "2023-03-06T01:29:14Z")

</div>

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:

```js
<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.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [March 6, 2023, 7:48pm UTC](https://meta.discourse.org/t/cannot-find-an-element-via-javascript-which-does-exist/257174/2 "2023-03-06T19:48:27Z")

</div>

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…

```xml
<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…

---

<div class="post-metadata">

### Author: ![darkpixlz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkpixlz/32/549896_2.png) [@darkpixlz](https://meta.discourse.org/u/darkpixlz)
#### Post date: [March 6, 2023, 10:10pm UTC](https://meta.discourse.org/t/cannot-find-an-element-via-javascript-which-does-exist/257174/3 "2023-03-06T22:10:05Z")

</div>

That worked! Seems like ths css doesn’t though.  
 ![image](https://global.discourse-cdn.com/meta/original/4X/4/8/f/48f8d6687ec55ca4f690846432e1f17406462ad2.png)

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [March 6, 2023, 10:38pm UTC](https://meta.discourse.org/t/cannot-find-an-element-via-javascript-which-does-exist/257174/4 "2023-03-06T22:38:21Z")

</div>

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

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

```

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [April 5, 2023, 10:38pm UTC](https://meta.discourse.org/t/cannot-find-an-element-via-javascript-which-does-exist/257174/5 "2023-04-05T22:38:30Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.