Aiuto per creazione semplice JS

[ivanisevic82]

Ciao a tutti, avrei bisogno di uno script molto semplice, che realizzi la seguente funzione:

Se mi trovo nella pagina "XXX", aggiungi al div "YYY" la classe "ZZZ".

Ho provato questo:

<script>
if (window.location.href == 'http://XXX') {
document.querySelector('#YYY').classList.add(classZZZ);
}; 
</script>

Purtroppo non funziona.

Potete aiutarmi a creare uno script valido per realizzare il mio scopo?

Grazie!

[ivanisevic82]

Scusate ho avuto qualche problema nell'inserimento del codice ma purtroppo non riesco più a modificare il messaggio.

In ogni caso vi chiedo semplicemente aiuto per convertire in script questa funzione:

Se mi trovo nella pagina "XXX", aggiungi al div "YYY" la classe "ZZZ".

[Vincent.Zeno]

Scusate ho avuto qualche problema nell'inserimento del codice

fixed

sposto in JS

[KillerWorm]

Ciao, a patto che la condizione sia verificata, l'elemento #YYY potrebbe non essere ancora presente nel DOM al momento in cui viene eseguito lo script. Ad esempio se lo script è inserito nell'head va da sé che nessun elemento dentro il body è stato ancora creato.

Assicurati di eseguire lo script quando il DOM è pronto. Un semplice metodo è quello di inserire gli script alla fine del body.

Verifica e fai sapere.



PS: ma un titolo esplicativo, no?
e pure cross-posting https://forum.html.it/forum/showthre...2#post25574562

dai non se nuovo del forum

[ivanisevic82]

Ciao, a patto che la condizione sia verificata, l'elemento #YYY potrebbe non essere ancora presente nel DOM al momento in cui viene eseguito lo script. Ad esempio se lo script è inserito nell'head va da sé che nessun elemento dentro il body è stato ancora creato.

Assicurati di eseguire lo script quando il DOM è pronto. Un semplice metodo è quello di inserire gli script alla fine del body.

Verifica e fai sapere.



PS: ma un titolo esplicativo, no?
e pure cross-posting https://forum.html.it/forum/showthre...2#post25574562

dai non se nuovo del forum

Bungiorno e grazie innanzitutto per la risposta.

Mi scuso per il titolo, hai ragione, è generico.

Riguardo al cross-posting in realtà pensavo di non farlo, ho aperto due topic in sezioni diverse (php e js) proprio perché volevo comparare i due metodi per capire quale fosse migliore.
Pensavo che aprendo un solo topic che parlasse sia di php sia di js sarei andata necessariamente in parte fuori tema.

Nel merito, credo di aver capito quello che hai scritto.

Considera che sto lavorando con WordPress, il codice js si inserisce in un apposito file staccato da tutto il resto, non so poi se WordPress lo infili nell’head o alla fine del body o altrove…

[alka]

Ho provato questo:
[...]
Purtroppo non funziona.

Hai fatto un minimo di debug? Hai provato a stampare i valori delle variabili di tuo interesse?

Queste istruzioni potresti scriverle addirittura nella Console del browser in diretta per verificare i valori ricevuti (es. se l'indirizzo della pagina è quello che ti aspetti, se il <div> viene individuato o meno, che classi ha, ecc.

Inoltre, c'è anche la documentazione per ogni evenienza.

Ciao!

[KillerWorm]

ho aperto due topic in sezioni diverse (php e js) proprio perché volevo comparare i due metodi per capire quale fosse migliore.
Pensavo che aprendo un solo topic che parlasse sia di php sia di js sarei andata necessariamente in parte fuori tema.

Capisco, diciamo che siamo borderline. Date però le possibili interconnessioni tra le tecnologie usate, e il fatto che tu voglia compararne le possibili soluzioni, avrei trattato l'argomento in un'unica discussione, sarebbe comunque accettabile l'OT. Ad ogni modo l'amministratore avrà valutato di gestirla così perciò nessun problema.

non so poi se WordPress lo infili nell’head o alla fine del body

Bisognerebbe verificare. Condivido il consiglio di alka, metti qualche console.log() per monitorare cosa sta avvenendo (premi F12 per aprire la console).

console.log('location.href:', window.location.href); // verifica se il valore di location.href è quello aspettato 
if (window.location.href == 'http://XXX') {
  const elemento = document.querySelector('#YYY');
  console.log('elemento:', elemento); // verifica che l'elemento selezionato non sia undefined, perciò sia presente già nel DOM 
  elemento.classList.add('classZZZ');
};

Se l'elemento non è presente significa che quello script è eseguito prima che il DOM sia disponibile.
Se non sai dove venga incluso e non puoi decidere dove inserirlo, una soluzione può essere quella di eseguirlo all'interno dell'evento DOMContentLoaded dell'oggetto window.

window.addEventListener('DOMContentLoaded', function (){
  if (window.location.href == 'http://XXX') {
    document.querySelector('#YYY').classList.add(classZZZ);
  }; 
});

Fai sapere.

[ivanisevic82]

Capisco, diciamo che siamo borderline. Date però le possibili interconnessioni tra le tecnologie usate, e il fatto che tu voglia compararne le possibili soluzioni, avrei trattato l'argomento in un'unica discussione, sarebbe comunque accettabile l'OT. Ad ogni modo l'amministratore avrà valutato di gestirla così perciò nessun problema.


Bisognerebbe verificare. Condivido il consiglio di alka, metti qualche console.log() per monitorare cosa sta avvenendo (premi F12 per aprire la console).

console.log('location.href:', window.location.href); // verifica se il valore di location.href è quello aspettato 
if (window.location.href == 'http://XXX') {
  const elemento = document.querySelector('#YYY');
  console.log('elemento:', elemento); // verifica che l'elemento selezionato non sia undefined, perciò sia presente già nel DOM 
  elemento.classList.add('classZZZ');
};

Se l'elemento non è presente significa che quello script è eseguito prima che il DOM sia disponibile.
Se non sai dove venga incluso e non puoi decidere dove inserirlo, una soluzione può essere quella di eseguirlo all'interno dell'evento DOMContentLoaded dell'oggetto window.

window.addEventListener('DOMContentLoaded', function (){
  if (window.location.href == 'http://XXX') {
    document.querySelector('#YYY').classList.add(classZZZ);
  }; 
});

Fai sapere.

Innanzitutto grazie ancora per l'attenzione ed il supporto.

Testerò la funzione log di cui mi avete parlato, perché sembra una cosa davvero utile, a prescindere dalla specifica problematica in oggetto.

Con particolare riferimento a quest'ultima, alla fine ho risolto lato PHP (opzione che mi sembrava in generale preferibile), con una semplicissima riga di codice da inserire all'interno del div a cui volevo aggiungere la classe:

<?php echo(is_page(49) ? 'MIA_CLASSE' : ''); ?>

La soluzione mi è stato consigliata da un utente del forum nell'altro topic aperto sull'argomento.

Grazie ancora!