Il timer non funziona

[lanvoel]

Grazie robynosse per le due versioni entrambe perfettamente funzionanti.
Da parte mia devo studiare con attenzione le tecniche che hai usato.

lanvoel

[robynosse]

Grazie robynosse per le due versioni entrambe perfettamente funzionanti.
Da parte mia devo studiare con attenzione le tecniche che hai usato.

lanvoel

Se c'è qualche cosa che non capisci o hai dei dubbi, chiedi pure.

[lanvoel]

Se c'è qualche cosa che non capisci o hai dei dubbi, chiedi pure.

Grazie robynosse per la tua disponibilità.
Desideravo capire meglio il perché dell'uso di removeEventListener().

Per esempio nella riga della prima tua versione:
document.getElementById("mioBottone").removeEventL istener("click",cambia);

oppure nella riga della tua seconda versione, che contiene la funzione ferma():
this.removeEventListener("click",cambia);

lanvoel

[robynosse]

Grazie robynosse per la tua disponibilit�.
Desideravo capire meglio il perch� dell'uso di removeEventListener().

Per esempio nella riga della prima tua versione:
document.getElementById("mioBottone").removeEventL istener("click",cambia);

oppure nella riga della tua seconda versione, che contiene la funzione ferma():
this.removeEventListener("click",cambia);

lanvoel

Ciao,


con la riga:

document.getElementById("mioBottone").addEventListener("click",cambia);

Stai dicendo letteralmente, partendo da destra:
aggiungi un ascoltatore di evento al click, quando questo evento si produce esegui la funzione cambia, l'elemento che voglio controllare ha l'id univoco 'mioBottone' e fa parte del mio document(la pagina).
Questo vuol dire che, ogno volta che fai click su quell'elemento, la funzione cambia viene lanciata.
All'interno della funzione cambia presta attenzione a questa linea:

intervallo=setInterval(sposta,1000);

In questa linea stiamo dicendo che dopo un secondo deve essere lanciata la funzione sposta, che non fa altro che aumentare di 50 pixel le coordinate x e y dell'oggetto con id 'mioBottone'


In pratica, ogni volta che fai click viene lanciata la funzione.
Se provi a commentare in questo modo la riga:

//this.removeEventListener("click",cambia);

Avresti quindi un comportamento anomalo del bottone che si sposta, prova a farlo e ricarica la pagina...
Ecco perch� ho messo un removeEventListener, questo toglie l'ascoltatore dell'evento assegnato e subito dopo ne assegno uno nuovo sullo stesso elemento dicendo di chiamare la funzione 'ferma' al click sul bottone:

Per esempio nella riga della prima tua versione:
document.getElementById("mioBottone").removeEventL istener("click",cambia);

oppure nella riga della tua seconda versione, che contiene la funzione ferma():
this.removeEventListener("click",cambia);

la parola this fa riferimento all'oggetto/elemento che ha generato l'evento, in questo caso il bottone con id mioBottone, ma questo vale solo per la funzione 'cambia', dal momento che la funzione 'cambia' viene lanciata al click sull'elemento mioBottone.
Nel caso specifico posso fare riferimento in 3 modi all'oggetto con id mioBottone:

document.getElementById('mioBottone')
con la variabile 'oggetto' dal momento che l'ho dichiarata fuori dalla funzione.
oppure con il this all'interno della funzione cambia


Quindi, ripetere document.getElementById('mioBottone') � ridondante e inutile.

Potresti passare la referenza this all'altra funzione, ma qui le cose si complicano(anche se non � difficile), dovresti inizare prima di tutto a capire bene cos'� il this.

Ti consiglio di provare a fare un esercizio, magari ti risulta pi� chiaro:
prova a creare 3 bottoni, tutti con la stessa classe, class="mieiBottoni".
Ad ogni bottone assegni un id diverso, bottone1, bottone2, bottone3.
Poi registri un unico ascoltatore sulla classe "mieiBottoni", getElementsByClassName chiamando la funzione miaFunzione al click di un elemento.

All'interno della funzione che chiami fai un alert(this.id);

Prova a vedere cosa succede...

Roberto