PDA

View Full Version : utilizzare evento onload con div [Javascript]

impaurito
07-09-2014, 18:12
Ciao,
vediamo se qualcuno riesce ad aiutarmi.
perchè sono fermo e non riesco a muovermi

Sto caricando una pagina dove ci sono 45 DIV che quando ci clicco sopra cambiano colore

for ($i=1;$i<46;$i++)
{
echo "<div id=\"".$i."\" onclick=\"action(this,'". $_SESSION["utente"]."','". $_SESSION["color"]."')\"><p>".$i."</p><p></p></div>";
}

la funzione action non fa altro che prendere il nome utente e il colore definito nella sessione e cambiare il colore del DIV selezionato.


cella.style.backgroundColor = colore;
cella.childNodes[1].innerHTML=user;


vorrei fare che quando carico i 45 DIV si colorino in automatico in base ad una varibile che definisco io (es. $utenti [$x]['color'] = RED)

cosi facendo i DIV già selezionati da altri utenti si colorano di RED.

pensavo di utilizzare onLoad e ho modificato ilcodice come segue:



for ($i=1;$i<46;$i++){
echo "<div id=\"".$i."\"
onload=\"action2(this,'". $utenti[1]['nome']."','". $utenti[1]['colore']."')\",
onclick=\"action(this,'". $_SESSION["utente"]."','". $_SESSION["color"]."')\"><p>".$i."</p><p></p></div>";
}

function action2(cella,user,colore){
alert ("ciao");
cella.style.backgroundColor = colore;
cella.childNodes[1].innerHTML=user;





ma sembra che con i DIV l'evento ONLOAD non sia presente in quanto la funzione action2 non mi viene richiamata.

Qualcuno ha qualche idea/consiglio?

Grazie
OoZic
07-09-2014, 22:12
1) mischiare javascript e php è il male.
2) usare onload e onclick direttamente nell'html è il male.
3) per le prime volte ti conviene usare una libreria come jQuery per interagire col DOM, altrimenti impazzisci con vanilla javascript (è più complicato per un beginner) http://jquery.com/

detto questo vediamo come risolvere il tuo problema in modo più semplice:

puoi scrivere i vari div con la funzione php e assegnare una classe così da avere un selettore per tutti i div, ad esempio .pippo.
eviterei gli id con i numeri progressivi, sono troppo generici non ha senso usarli.
scrivi anche tutti gli attributi che vuoi utilizzare nel formato data-user="" data-number="", in questo modo hai accesso dopo tramite jQuery.
esempio:

<div class="pippo" data-color="RED" data-user="Mario Rossi"><p>1</p></div>
<div class="pippo" data-color="GREEN" data-user="Franco Verdi"><p>2</p></div>


poi inserisci uno script alla fine della pagina prima di chiudere il </body> ed è come se l'avessi messo all'onload.


<body>
... codice della tua pagina ...

<script>
$('.pippo').on('click',function(){
this.style.backgroundColor = $(this).data('color');
this.childNodes[1].innerHTML= $(this).data('user');
});
</script>
</body>
</html>


Questo però fa si che i div si colorino al click.

Se vuoi pre-colorare tutti i div il modo più semplice è scrivere direttamente lo style nel div secondo me.
Non capisco veramente perchè devi farlo dopo in javascript quando hai già la variabile che ti arriva dal backend in php, se ho capito bene quello che vuoi ottenere.
<div class="pippo" style="background-color:red;"><p>1</p></div>

Se proprio ci tieni a scrivere il background-color con javascript puoi farlo in questo modo, mentre scrivi tutti i <div> da php puoi aggiungere una classe a quelli già definiti tipo .colorato
<div class="pippo colorato" data-color="RED" data-user="Mario Rossi"><p>1</p></div>
<div class="pippo" data-color="GREEN" data-user="Franco Verdi"><p>1</p></div>
Poi inserisci uno script alla fine della pagina prima di chiudere il body

<script>
$('.colorato').css('background-color','red');
</script>

il colore 'red' puoi cambiarlo a piacimento da php, ci scrivi dentro il colore che vuoi.

make sense?
impaurito
14-09-2014, 16:51
Se vuoi pre-colorare tutti i div il modo più semplice è scrivere direttamente lo style nel div secondo me.
Non capisco veramente perchè devi farlo dopo in javascript quando hai già la variabile che ti arriva dal backend in php, se ho capito bene quello che vuoi ottenere.
<div class="pippo" style="background-color:red;"><p>1</p></div>




Alla fine ho usato per questa soluzione ;)
era la più facile e la più banale.

Grazie :D