[javascript] azione al cambiare del contentuo di un div

[alninek]

Salve a tutti,

Sto creando un palinsesto di una radio in HTML e CSS;

in pratica si tratta di una serie di div incolonnati che all'interno hanno il nome del programma radiofonico, o rubrica legato a un determinato orario che si torva nella prima colonna a sinistra.

Ognuno di questi div ha un suo contenuto testuale standard: es. Musica, latino americano, Musica anni 80, ecc.

Vorrei se fosse possibile dei suggerimenti su come creare una funzione javascript che mi cambi il colore dello sfondo del div ogni volta che cambio il testo contenuto all'interno.

Ho creato un inizio di funzione:

function cambiaSfondo(el)
                {
                    if (el.innerHTML=="Musica")
                    {
                        el.style.backgroundColor="pink"
                    }
                }

questo è per un singolo div (el che corrisponde ai vari div - come faccio a farlo per tutti i div?) e per un singolo testo: ora dovrei creare una funzione che fa iterazione fra i vari elementi HTML (i div) ognuno dei quali ha uno specifico id.

Ovviamente la funzione cambia sfondo dovrebbe avere tanti if quanti sono i testi (a cui sono legati specifici colori)

[alninek]

Originariamente inviato da coffe_killer

quello che mi viene da suggerirti è attribuire a quei div una classe comune, e poi aggiungere un hook sull'change del text all'interno.

Grazie @coffe_killer della gentile risposta :-)
mmmhhh... potresti spiegare per favore?
non sono molto esperto... qualcosa step by step sarebbe molto gradita :-)

[alninek]

Originariamente inviato da coffe_killer

http://jsfiddle.net/4q5qp4r8/

in questo esempio il testo del div viene cambiato catturando il click su un button, ma agganciando un evento con trigger e bind lo si può fare praticamente ovunque.

Super gentile! :-)
...mi sa però che devo studiarne ancora di javascript! :-)
Ho solo una infarinatura super generale studiata all'università... non capisco quasi nulla dell'esemepio.

Ma sei stato getnilissimo. Grazie ancora! :-)

[espanico]

Infatti lui non ha utilizzato javascript puro ma il Framework jquery

potresti fare anche una cosa simile: https://jsfiddle.net/sixdas/df93gv79/

[alninek]

Originariamente inviato da espanico

Infatti lui non ha utilizzato javascript puro ma il Framework jquery

potresti fare anche una cosa simile: https://jsfiddle.net/sixdas/df93gv79/

Grazie anche a te della risposta :-)

Fammi capire:

HTML
assegno alla textarea la classe box (nel mio caso al div)

JAVASCRIPT
assegna la classe "change" CSS alla textarea che ha classe "box" quando?

CSS
creo una classe change che dovrò assegnare a? ...per ovviamente cambiare i lcolore del background a piacere

P.S. chiedo scusa ma purtroppo capisco qualcosa di HTML e di CSS ma poco di javascript

[espanico]

Funziona molto semplicemente, quando il testo cambia, nella textarea con la classe box viene assegnata la classe css change, che in questo caso cambia lo sfondo in verde.

Secondo me le strade sono diverse, bisogna capire cosa vuoi realizzare nello specifico. Tu hai detto che ci sono dei div affiancati, ma non hai scritto se questi sono statici oppure aggiornatati dinamicamente. Il cambiamento del testo come avviene?

[alninek]

Originariamente inviato da espanico

Funziona molto semplicemente, quando il testo cambia, nella textarea con la classe box viene assegnata la classe css change, che in questo caso cambia lo sfondo in verde.

Secondo me le strade sono diverse, bisogna capire cosa vuoi realizzare nello specifico. Tu hai detto che ci sono dei div affiancati, ma non hai scritto se questi sono statici oppure aggiornatati dinamicamente. Il cambiamento del testo come avviene?

Grazie della tua risposta nuovamente :-)

Ho capito. Credo di essermi spiegato male, chiedo scusa.

Immagina una colonna dove ci sono gli orari, divisi in intervalli di un'ora, (07.00-08.00 - 08.00-09.00, ecc.), una riga per i giorni della settimana (Lunedi, Martedi, ecc.).

Gli incroci sono i div. All'interno di ogni div c'è un testo che identifica il nome di un programma radiofonico. Quindi + o - i div sono una settantina circa.

Mi serve che la funzione javascript analizzi il contenuto testuale di ogni singolo div assegnando un colore allo sfondo ogni volta che, nel codice HTML, viene cambiato a mano il testo, dopo che ovviamente ho assegnato a certi testi definiti (il nome del programma) un colore di sfondo.

Se ci sono 20 programmi diversi, con 20 nomi distinti dovrei fare 20 confronti per ognuno dei div presenti nella "tabella", quindi credo che mi serva una iterazione... o sbaglio?

chiedo ancora scusa e spero di esermi spiegato meglio. Grazie della pazienza :-)

[wingman87]

Mi sembra di capire che per modificare il testo dei div apri il documento con un editor e lo modifichi. Se è così hai ragione serve solo un loop. Hai diverse opzioni ma la soluzione migliore dipende dalla struttura html esistente. Probabilmente la più semplice è aggiungere una classe css comune a tutti i div che possono contenere il testo da analizzare e poi prenderli tutti con
var tuttiIDivDaAnalizzare = document.getElementsByClassName('laClasseCheHaiAggiunto')

https://developer.mozilla.org/it/doc...ntsByClassName

Vedi il link per un esempio.

A quel punto fai un ciclo sugli elementi e chiami la funzione che hai postato nel primo post a cui vai ad aggiungere tutti i casi mancanti


Inviato dal mio F5121 utilizzando Tapatalk

[alninek]

Originariamente inviato da wingman87

Mi sembra di capire che per modificare il testo dei div apri il documento con un editor e lo modifichi. Se è così hai ragione serve solo un loop. Hai diverse opzioni ma la soluzione migliore dipende dalla struttura html esistente. Probabilmente la più semplice è aggiungere una classe css comune a tutti i div che possono contenere il testo da analizzare e poi prenderli tutti con
var tuttiIDivDaAnalizzare = document.getElementsByClassName('laClasseCheHaiAggiunto')

https://developer.mozilla.org/it/doc...ntsByClassName

Vedi il link per un esempio.

A quel punto fai un ciclo sugli elementi e chiami la funzione che hai postato nel primo post a cui vai ad aggiungere tutti i casi mancanti


Inviato dal mio F5121 utilizzando Tapatalk

Grazie anche a te della gentile risposta.

In effetti ho dato a ciascun div degli id mnemonici in pratica il giorno della settimana con 4 numeri accanto che identificano l'orario di trasmissione

Lunedi0910
Lunedi1011
...
Martedi1213
...
Mercoledi1718
ecc.

però in effetti facendo una classe li posso inserire tutti li dentro e via.
Ora, assegnando una classe a tutti sti div dovrei sostituire "el" nella funzione che ho creato nel primo post con la variabile che tu hai suggerito?

if (tuttiIDivDaAnalizzare.innerHTML == "Latino americano")
                    {
                        tuttiIDivDaAnalizzare.style.backgroundColor = "#FFE118"
                    }

Oppure devo creare un array con la variabile all'interno della quale inserire i singoli testi esatti? ("Latino americano", "Musica anni 80", "New Age" ecc.)

var tuttiIDivDaAnalizzare = newArray();
tuttiIDivDaAnalizzare[0]= "Musica anni 80";
tuttiIDivDaAnalizzare[1] = "New Age";
tuttiIDivDaAnalizzare[2] = "Latino americano";
...

Cioè una volta che ho fatto l'analisi del contenuto del div con il .getElementsByClassName, come faccio ad applicare la funzione che cambia il background? La chiamo dove? A cosa la applico se invece di utilizzare gli ID utilizzo la classe?

Per quanto riguarda la iterazione quello è al di fuori delle mie capacità; purtroppo all'università Javascript lo abbiamo trattato solo marginalmente, se potessi spiegarmi sarebbe fantastico, se no magari un link dove posso capire come funziona di base sarebbe graditissimo.

Grazie della pazienza :-)

[wingman87]

Ti ho scritto un esempio:

https://jsfiddle.net/v1km3yv0/

[alninek]

Originariamente inviato da wingman87

Ti ho scritto un esempio:

https://jsfiddle.net/v1km3yv0/

MA GRAZIEEE! gentilissimo!
adesso lo guardo con attenzione!

[alninek]

Originariamente inviato da wingman87

Ti ho scritto un esempio:

https://jsfiddle.net/v1km3yv0/

Allora:

Il codice non funziona perchè mi sa che ho sbagliato io nel non specificare: e si palesa tutta la mia inesperienza...

Il contenuto del div non è un testo e basta ma degli elenchi:

<div id="Lunedi090915" class="cambiaColore">
   <ul>
      <li>Musica</li>
   </ul>
</div>

ergo credo che innerHTML mi restituisca in realtà "<ul><li>Musica</li></ul>" e non solo "Musica" ed è per questo motivo che la cosa non funge.

Tra l'altro avendo l'esigenza alcune volte di inserire all'interno di un unico div delle righe di testo separate come:

<div id="Lunedi090915" class="cambiaColore">
   <ul>
      <li>Musica</li>
      <li>Oroscopo</li>
      <li>Meteo</li>
   </ul>
</div>

...non so nemmeno se posso fare un confronto di stringhe... perchè all'interno di alcuni div le stringhe sono più di una (sono i singoli <li>).

Che dici? meglio che mi do all'ippica?

[espanico]

Sostituisci:

  if (el.innerHTML=="Musica")

con

 if (el.innerHTML.indexOf("Musica") != -1)

Cosi fa un controllo della stringa, se la trova aggiunge la classe.

[alninek]

Originariamente inviato da espanico

Sostituisci:

  if (el.innerHTML=="Musica")

con

 if (el.innerHTML.indexOf("Musica") != -1)

Cosi fa un controllo della stringa, se la trova aggiunge la classe.

Grazie ancora della gentile risposta :-)

Ho provato a fare come hai suggerito, ma non va... nel senso che se refresho con F5 la situazioone è immutata.

P.S. scusami, siccome a sto punto sto facendo il pappagallo che copia, potrebbe anche darsi che chiedo una cosa ovvia e me ne scuso:

cosa intendi per "se la trova aggiunge la classe"?


la classe "cambioColore" che wingman87 nel suo esempio ha nominato "hour" l'ho già assegnata manualmente nel codice HTML ai singoli div che contengono le liste:

<div id="Lunedi090915" class="cambiaColore">
   <ul>
      <li>Musica</li>
   </ul>
</div>

ho sbagliato io a interpretare? A Quale "classe" ti riferisci?

[alninek]

Sono riuscito a risolvere.

A breve inserisco il codice che ho usato

Un ringraziamento a tutti per la pazienza e le spiegazioni

[alninek]

Ecco come ho risolto:

Nell'HTML dopo aver nominato i singoli div con degli id, ho assegnato loro una classe "cambioColore"

nell'head ho inserito la funziona Javascript cambiaSfondo(el)

 function cambiaSfondo(el)
                {
                    if (el.innerHTML.indexOf("80") != -1)
                    {
                        return el.style.backgroundColor = "pink";
                    }
                    else if (el.innerHTML.indexOf("90") != -1)
                    {
                       return el.style.backgroundColor="green"
                    }

e così per tutti i gruppi di div.

il return mi è servito perchè ho previsto nel CSS una proprietà :hover per i vari div con la funzione di cambiamento dello sfondo;
essendo questa anche il compito della funzione cambiaSfondo() dovevo pensare a qualcosa che mi cambiasse lo sfondo al passaggio del mouse ma non appena il mouse usciva dall'area interessata mi ripresentasse lo sfondo come cambiato dalla funzione; ergo in calce all'HTML e più precisamente prima del
</body> ho inserito grazie all'aiuto di un prof. all'università una funzione cambiatuttiSfondi():

function CambiaTuttiSfondi()
            {
                var elements = document.getElementsByClassName('cambiaColore');

                for (i = 0; i < elements.length; i++) {
                    cambiaSfondo(elements[i]);
                    elements[i].addEventListener("mouseover", function () {
                        this.style.backgroundColor = "#grey"
                    });
                    elements[i].addEventListener("mouseout", function () {
                        this.style.backgroundColor = cambiaSfondo(this);
                    });

                    }
            }

Grazie ancora a tutti dell'aiuto e della pazienza. :-)