Impossibile trovare un elemento tramite JavaScript che esiste

[darkpixlz (Pyx)]

Ciao,

Ho provato a creare uno script per recuperare l’attributo background-image dall’intestazione del profilo, quindi salvarlo come variabile root. Tuttavia, il mio codice non funziona. Ho provato molte soluzioni, alcune delle quali includevano l’IA, che hanno semplicemente ripristinato la versione del plugin e non hanno aiutato.

Questo è il codice:

<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; // quando viene eseguito, questo appare sempre, indipendentemente da cosa e visualizza lo stesso errore
        }

    };

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

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

    document.addEventListener('DOMContentLoaded', init);

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

Grazie.

[awesomerobot (Kris)]

Il tuo script viene caricato prima che la maggior parte della pagina venga renderizzata, quindi non riesce a trovare l’elemento…

Questo dovrebbe darti quello che stai cercando…

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

Presumo che tu stia cercando di riutilizzare lo sfondo del profilo dell’utente nella pagina del profilo da qualche parte? altrimenti questo non rimarrà se ti allontani da un profilo e aggiorni la pagina…

[darkpixlz (Pyx)]

Ha funzionato! Sembra che il CSS, invece, non funzioni.

[awesomerobot (Kris)]

Ah giusto, quello che dovrai fare è aggiungere la parte url() al valore della proprietà personalizzata… quindi qualcosa del tipo:

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