Не удаётся найти элемент через JavaScript, хотя он существует

Разработка
1

Здравствуйте,

Я попытался написать скрипт для получения атрибута background-image из заголовка профиля и сохранения его в качестве корневой переменной. Однако мой код не работает. Я перепробовал множество решений, некоторые из которых были предложены ИИ, но они лишь откатили версию плагина и не помогли.

Вот код:

<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; // при запуске это всегда срабатывает, независимо от условий, и выводит одну и ту же ошибку
        }

    };

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

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

    document.addEventListener('DOMContentLoaded', init);

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

Спасибо.

2

Ваш скрипт загружается до того, как отрендерена большая часть страницы, поэтому он не может найти элемент…

Это должно помочь вам получить то, что вы ищете…

<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>

Предполагаю, вы пытаетесь использовать фоновое изображение профиля пользователя где-то на странице профиля? Иначе это не сохранится, если вы уйдете со страницы профиля и обновите страницу…

3

Это сработало! Похоже, что CSS всё же не работает.
image

4

Ах, верно, вам нужно добавить часть url() к значению пользовательского свойства… что-то вроде:

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