utilizzare evento onload con div [Javascript]

impaurito · 07-09-2014, 19: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

Codice:

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.

Codice:

                   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:

Codice:

            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, 23: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:

Codice:

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

Codice:

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

Codice:

<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

Codice:

<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

Codice:

  <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, 17:51

Quote:

Originariamente inviato da OoZic

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.

Codice:

<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

07-09-2014, 19:12	#1
impaurito Junior Member Iscritto dal: Mar 2009 Messaggi: 18	utilizzare evento onload con div [Javascript] 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 Codice: 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. Codice: 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: Codice: 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

07-09-2014, 23:12	#2
OoZic Senior Member Iscritto dal: Nov 2010 Città: Londra Messaggi: 620	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: Codice: <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. Codice: <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. Codice: <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 Codice: <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 Codice: <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? __________________ > This is me < *When you gaze long into an abyss the abyss also gazes into you.*

Strumenti
Mostra una versione stampabile Invia questa pagina per email