cambio di colore continuo

[isaksonn]

ciao a tutti!

scrivo perche avrei bisogno di una funzione la quale, al click del mouse su un div mi facesse cambiare il colore di quel div (e fin qua ci sono), ma nel caso lo volessi rifare in seguito sullo stesso div riprenderebbe il colore di prima.

Per capire meglio immaginatevi un checkbox: al primo click si spunta, ma ogni volta che si clicca cambia di stato.

Ora uso questo metodo:

onclick="this.style.backgroundColor='#f90';"

ma immaginatevi fare questa operazione per tot di elementi, senza contare che al secondo click non ritornerebbe indietro.


Avevo pensato anche a questo:

onclick="
var colore1=0;
if(colore1==0){
this.style.backgroundColor='#666';
colore1=1;
}else{
this.style.backgroundColor='#ff9900';
colore1=0;
}
"
ma non va (e poi lo dovrei riproporre per ogni elemento cambiando la variabile..).

Qualcuno ha una soluzione?
Come avrete capito sono un neofita in javascript e per quanto (magari) sia facile mi ci sto sbattendo la testa da un po...

[cavicchiandrea]

Se puoi usare jquery questo potrebbe fare al caso tuo

[Enzaccio]

Avevo pensato anche a questo:
... / ...
ma non va (e poi lo dovrei riproporre per ogni elemento cambiando la variabile..).

Ma sì che va! - Va aggiustato così, però:

<script>

var colore1=0;

function enziana(questo){

     if(colore1==0){
        questo.style.backgroundColor='#666';
        colore1=1;
  }else{
        questo.style.backgroundColor='#ff9900';
        colore1=0;
  }

 }
</script>

<div onclick="enziana(this);" style="border: 1px dashed red;">Capisci che se il Mostro di Firenze è un partigiano ... ...</div>

Poi vediamo come fargli gestire più DIV; ora vado a seguire i notiziari.

[Xinod]

lavora con le classi: con className setti e leggi la classe assegnata all' elemento in maniera crossbrowser
- gestisci tutto l' aspetto via css
- non devi portarti dietro variabili/expando
- non ti complichi la vita per tenere in scope chi setta chi
ciao

[isaksonn]

Ma sì che va! - Va aggiustato così, però:

<script>

var colore1=0;

function enziana(questo){

     if(colore1==0){
        questo.style.backgroundColor='#666';
        colore1=1;
  }else{
        questo.style.backgroundColor='#ff9900';
        colore1=0;
  }

 }
</script>

<div onclick="enziana(this);" style="border: 1px dashed red;">Capisci che se il Mostro di Firenze è un partigiano ... ...</div>

Poi vediamo come fargli gestire più DIV; ora vado a seguire i notiziari.

Perfetto, era proprio quello che cercavo!! solo l'ultima cosa:

ho notato che alla prima volta che schiaccio sul primo di 6 div (ad esempio) cambia di colore come dovrebbe fare, ma ogni qualvolta clicco su un altro div devo cliccare due volte per farlo cambiare di stato...

hai qualche idea? (mi hai già aiutato tantissimo cmq!!! )

[Enzaccio]

Potevi fare a meno di quotare tutto il mio script: chi legge ce l' ha giusto li' sopra e già lo sa'.

(Non) ho idea invece di cosa hai fatto te: dici c'è quel problema, ma dici anche che i div sono diventati 6. Io ne ho messo 1; quindi per gestirne più avrai ... chissà, io faccio così: faccio esistere la moltitudine di variabili in forma di Array. Non si manifesta a mio parere la complicanza paventata da Xinod, a meno che non vogliamo contemplare il caso di centinaia di DIV generati dinamicamente o cos' altro.

<script>

var colore=new Array();
    colore[1]=0;
    colore[2]=0;
    colore[3]=0;
    colore[4]=0;
    colore[5]=0;
    colore[6]=0;
    colore[7]=0; //questo è in più, inusato; non compromette lo script

function enziana(questo, quale){

     if(colore[quale]==0){
        questo.style.backgroundColor='#666';
        colore[quale]=1;
  }else{
        questo.style.backgroundColor='#ff9900';
        colore[quale]=0;
  }

 }
</script>
<style> div {border: 1px dashed #66f} </style>

<div onclick="enziana(this, 1);">Capisci che se il Mostro di Firenze è un partigiano, ... ...</div>
<div onclick="enziana(this, 2);">... e un "nome importante" della Resistenza non un buzzurro qualunque come il Pacciani, ...</div>
<div onclick="enziana(this, 3);">... le "esigenze" di non farlo scoprire ci possono stare tutte, compresa la c.d. "Ragione di Stato".</div>
<div onclick="enziana(this, 4);">Del resto, uno che è pratico di arma da fuoco e d' arma bianca, sa muoversi nella boscaglia DI NOTTE ...</div>
<div onclick="enziana(this, 5);">... e come "diversivo" invece della solita coppietta decide di ammazzare DUE TEDESCHI nel camper, ...</div>
<div onclick="enziana(this, 6);">... a chi deve far pensare? Ai satanisti? Alle prostitute e al mago Indòvino? Al Pacciani coi by-pass?</div>

Alla funzione passiamo ora anche un secondo parametro assieme al this, un numerale con

onclick="enziana(this, 3);" che all' interno della function viene veicolato sulle ali della parola quale .
Potremmo anche passare altri termini che non un numerale, ad esempio:

onclick="enziana(this, 'div3');"

ed accedere alla variabile definita nella forma colore['div3']=0; di Array associativo. Attenzione a racchiuderla tra apici, perché ora è di stringa che trattiamo, non più di numerale o di JS reserved words.

Assunto ciò, posso ora dirti che puoi anche semplicemente scrivere e condensare il blocco di codice per le variabili, nella forma:

var colore=new Array('0', '0', '0', '0', '0', '0', '0');

e attenzione (ne ho messi 7) che gli Array contano da zero: il primo, quello in rosso, risponde(rebbe) a colore[0] e senza metterlo, mancherebbe l' articolo per il sesto DIV. O cambiare numerazione ai DIV.