Il pulsante funziona solo la prima volta

**lanvoel** · 06-08-2019, 11:47

Nel codice che riporto qui sotto, scrivendo i valori degli attributi delle proprietà del testo , si ha la scrittura richiesta. Cancellando questi valori, scrivendone di nuovi e cliccando il pulsante “scrivi” non viene eseguita la nuova scrittura: per ottenerla si deve rilanciare il codice.
Non riesco a capire il perché. Devo notare che in programmi analoghi, anche senza cancellare i valori con un pulsante apposito, ma soltanto cambiandoli dopo averli selezionati con il mouse, l’istruzione può essere eseguita più volte, senza rilanciare il codice.
Desidero sapere per quale motivo ciò avviene. Grazie
lanvoel

codice:

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid blue;">
</canvas>
<FIELDSET style=" width: 140px; height: 255px; position: absolute; left:550px; top:20px; background: aqua;"><LEGEND>scrittura testo</LEGEND>
<TABLE border=0>
<TR><TD>
testo:<input type="text" id="testo1" size=10><br>
xP=<input type="text" id="xP1" value="100" size=7><br>
yP=<input type="text" id="yP1" value="100" size=7><br>
colore=<input type="text" id="colore1" value="red" size=10><br>
col_bo=<input type="text" id="col_bo1" value="blue" size=10><br>
<input type="button" id="testo2" value="scrivi testo" onclick="testo()"><br>
<input type="button" id="cancella1" value="cancella dati" onclick="cancella()"><br>
</TABLE></FIELDSET>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

codice:

function testo()
{
testo=testo1.value;
colore=colore1.value;
col_bo=col_bo1.value
xP=xP1.value;
yP=yP1.value;
ctx.beginPath();
 ctx.font = "normal normal 80px Thaoma";       
 ctx.lineWidth=1;
 ctx.fillStyle=colore;                 //riempimento
 ctx.fillText(testo, xP, yP);          //riempimento
 ctx.strokeStyle=col_bo;                  //bordo
 ctx.strokeText(testo, xP, yP);           //bordo
ctx.closePath();
}
function cancella()
{
testo1.value="";
colore1.value="";
col_bo1.value="";
xP1.value="";
yP1.value="";
}
</script> 
</body>
</html>

**m4rko80** · 08-08-2019, 09:53

Ciao, ci sono delle cose da sistemare. Intanto se quello che compili nella form non è differente dal precedente non viene riscritto nulla. Se ci sono errori o mancanze altrettanto. Per pulire il contenuto devi richiamare la funzione per i canvas.

codice:

<!DOCTYPE html>
<html>
<head>
<script>

var ctx, canvas;

function doTesto()
{

testo=testo1.value;
colore=colore1.value;
col_bo=col_bo1.value
xP=xP1.value;
yP=yP1.value;

ctx.beginPath();
 ctx.font = "normal normal 80px Thaoma";       
 ctx.lineWidth=1;
 ctx.fillStyle=colore;                 //riempimento
 ctx.fillText(testo, xP, yP);          //riempimento
 ctx.strokeStyle=col_bo;                  //bordo
 ctx.strokeText(testo, xP, yP);           //bordo
ctx.closePath();
}

function cancella()
{
ctx.clearRect(0, 0, canvas.width, canvas.height)
testo1.value="";
colore1.value="";
col_bo1.value="";
xP1.value="";
yP1.value="";
}
</script/>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid blue;">
</canvas>
<FIELDSET style=" width: 140px; height: 255px; position: absolute; left:550px; top:20px; background: aqua;"><LEGEND>scrittura testo</LEGEND>
<TABLE border=0>
<TR><TD>
testo:<input type="text" id="testo1" size=10><br>
xP=<input type="text" id="xP1" value="100" size=7><br>
yP=<input type="text" id="yP1" value="100" size=7><br>
colore=<input type="text" id="colore1" value="red" size=10><br>
col_bo=<input type="text" id="col_bo1" value="blue" size=10><br>
<input type="button" id="testo2" value="scrivi testo" onClick="doTesto()"><br>
<input type="button" id="cancella1" value="cancella dati" onclick="cancella()"><br>
</TABLE></FIELDSET>
<script>
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
</script>

</body>
</html>

**lanvoel** · 08-08-2019, 19:51

Grazie m4rko80.
Non avrei trovato l'errore senza il tuo intervento! Infatti nel mio codice si usa la variabile testo e la funzione testo(), cioè lo stesso nome.
Quindi, come hai fatto tu, bastava cambiare uno dei due nomi, per esempio funzione do_testo().

lanvoel

Discussione: Il pulsante funziona solo la prima volta

Strumenti discussione

Ricerca discussione

Visualizza

Il pulsante funziona solo la prima volta

Permessi di invio