Element kann via JavaScript nicht gefunden werden, obwohl es existiert

[darkpixlz (Pyx)]

Hallo,

Ich habe versucht, ein Skript zu erstellen, um das background-image-Attribut aus dem Profil-Header zu extrahieren und es dann als Root-Variable zu speichern. Mein Code funktioniert jedoch nicht. Ich habe viele Lösungen ausprobiert, einige davon enthielten KI, die nur die Plugin-Version zurückgesetzt und nicht geholfen hat.

Hier ist der 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; // Wenn dies ausgeführt wird, erscheint dies immer, egal was passiert, und zeigt den gleichen Fehler an
        }

    };

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

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

    document.addEventListener('DOMContentLoaded', init);

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

Vielen Dank.

[awesomerobot (Kris)]

Ihr Skript wird geladen, bevor der Großteil der Seite gerendert wird, daher kann es das Element nicht finden…

Dies sollte Ihnen das bringen, wonach Sie suchen…

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

Ich gehe davon aus, dass Sie versuchen, den Profilhintergrund des Benutzers auf der Profilseite irgendwo wiederzuverwenden? Andernfalls wird dies nicht beibehalten, wenn Sie von einem Profil weg navigieren und die Seite neu laden…

[darkpixlz (Pyx)]

Das hat funktioniert! Scheint aber, als ob das CSS nicht funktioniert.

[awesomerobot (Kris)]

Ah richtig, Sie müssen den Teil url() zum Wert der benutzerdefinierten Eigenschaft hinzufügen … also so etwas wie:

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