Il timer non funziona

**lanvoel** · 23-02-2018, 23:56

Il programma seguente esegue lo sostamento di un button di top e left di 50px e funziona bene.
Ma non funziona, se alla riga del "button":
<input type="button" onclick='cambia(this)' value="cliccami">
sostituiamo la seguente con il timer1:

cioè sostituiamo la riga successiva (che nel programma è bypassata) per ottenere altri spostamenti per ogni secondo.
Grazie per eventuali aiuti.

lanvoel

codice:

<html>
<head>
<script type="text/javascript">
var timer1;
var x=0;
var y=0;
function cambia(elemento)
{
x=x+"50";
y=y+"50";
elemento.style.fontSize="40";
elemento.style.backgroundColor="cyan";
elemento.style.borderColor="blue";
elemento.style.color="red";
elemento.style.position="absolute";
elemento.style.top =y;
elemento.style.left =x;
}
</script>
</head>
<body>
<input type="button" onclick='cambia(this)' value="cliccami">     
<!-- <input type="button" onclick="timer1=setInterval('cambia(this)',1000)"  value="cliccami">  //-->
</body>
</html>

**robynosse** · 24-02-2018, 02:33

Ciao,
definisci la frase "Ma non funziona", tu che cosa vorresti che facesse esattamente?

**robynosse** · 24-02-2018, 02:46

Forse ho capito quello che volevi fare, togli le virgolette a queste 2 righe:

codice:

x=x+50;
y=y+50;

Altrimenti concatenerà la stringa 50 ogni volta:
50
5050
505050
per quello che non vedi più il bottone

**lanvoel** · 24-02-2018, 10:32

Grazie robynosse.
Ho provato a togliere le virgolette a x=x+"50"; e a y=y+"50"; ma il programma continua a non funzionare e da' l'errore:
"Impossibile impostare la proprietà 'fontSize' di un riferimento nullo o non definito".
Quindi il programma non arriva neanche a impostare le proprietà 'top' e 'left' perché viene bloccato alla prima proprietà di style.

lanvoel

**cavicchiandrea** · 24-02-2018, 10:53

codice:

<input type="button" onclick="timer1=setInterval(function(){cambia(this)},1000)"  value="cliccami">

**robynosse** · 24-02-2018, 11:28

Originariamente inviata da lanvoel

Grazie robynosse.
Ho provato a togliere le virgolette a x=x+"50"; e a y=y+"50"; ma il programma continua a non funzionare e da' l'errore:
"Impossibile impostare la proprietà 'fontSize' di un riferimento nullo o non definito".
Quindi il programma non arriva neanche a impostare le proprietà 'top' e 'left' perché viene bloccato alla prima proprietà di style.

lanvoel

Fai così:

codice:

<html>
<head>
<script type="text/javascript">
  window.onload=function(){
    document.getElementById("mioBottone").addEventListener("click",cambia);
var timer1;
var x=0;
var y=0;
var intervallo;
function cambia(){
x=x+50;
y=y+50;
this.style.fontSize="40";
this.style.backgroundColor="cyan";
this.style.borderColor="blue";
this.style.color="red";
this.style.position="absolute";
this.style.top =y;
this.style.left =x;
  document.getElementById("mioBottone").removeEventListener("click",cambia);
intervallo=setInterval(sposta,1000);
}
    
    function sposta(){
      oggetto=document.getElementById("mioBottone");
      x=x+50;
      y=y+50;
      oggetto.style.top =y;
      oggetto.style.left =x;
    }
    

    
  }
</script>
</head>
<body>
<input type="button" id="mioBottone" onclick=""  value="cliccami">     

</body>
</html>

**robynosse** · 24-02-2018, 11:35

Cosi ancora meglio, se clicchi nuovamente nel bottone si ferma (inoltre ho definito l'oggetto fuori dalla funzione, altrimenti si ripeteva inutilmente):

codice:

<html>
<head>
<script type="text/javascript">
  window.onload=function(){
    var oggetto=document.getElementById("mioBottone");
    oggetto.addEventListener("click",cambia);
var timer1;
var x=0;
var y=0;
var intervallo;
function cambia(){
x=x+50;
y=y+50;
this.style.fontSize="40";
this.style.backgroundColor="cyan";
this.style.borderColor="blue";
this.style.color="red";
this.style.position="absolute";
this.style.top =y;
this.style.left =x;
this.removeEventListener("click",cambia);
this.addEventListener("click",ferma);
intervallo=setInterval(sposta,1000);
}
    
    function sposta(){
      
      x=x+50;
      y=y+50;
      oggetto.style.top =y;
      oggetto.style.left =x;
    }
    function ferma(){
      clearInterval(intervallo);
    }
    

    
  }
</script>
</head>
<body>
<input type="button" id="mioBottone" onclick=""  value="cliccami">     

</body>
</html>

**lanvoel** · 24-02-2018, 16:02

Grazie cavicchiandrea. Ho scritto la riga che mi suggerisci:
<input type="button" onclick="timer1=setInterval(function(){cambia(this )},1000)" value="cliccami">
ma si ha ancora l'errore:
"Impossibile impostare la proprietà 'fontSize' di un riferimento nullo o non definito".
Correggendo la tua riga ponendo gli apici così: 'function(){cambia(this)}'
<input type="button" onclick="timer1=setInterval('function(){cambia(thi s)}',1000)" value="cliccami">
non viene segnalato nessun errore, ma il programma si blocca e non funziona.

lanvoel

**lanvoel** · 24-02-2018, 16:30

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

lanvoel

**robynosse** · 24-02-2018, 17:16

Originariamente inviata da lanvoel

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.

Discussione: Il timer non funziona

Strumenti discussione

Ricerca discussione

Visualizza

Il timer non funziona

Permessi di invio