Scrive NaN invece di un numero

**lanvoel** · 07-05-2018, 09:29

Nell'esercizio originale, che riporto per primo, si scrivono tre numeri in tre caselle di testo e in una quarta casella di testo si ottiene, regolarmente, la loro somma, usando l'evento onchange.
Ho modificato l'esercizio, riportandolo per secondo, inserendo il tag <fieldset> nel >form> e, di conseguenza, nella funzione tot() ho modificato la riga:
document.modulo.totale.value=totale;
in questa: document.modulo.fieldset1.totale.value=totale;
cioè ho inserito il nome della <fieldset> nella dotnotation, ma nella casella del totale non viene scritto nulla.
Allora ho commentato la riga //document.modulo.fieldset1.totale.value=totale;
e ho provato a raggiungere la casella del totale con le collections:
document.forms[0].elements[4].value=totale;
ma questa volta nella casella del totale viene scritto NaN, eppure la variabile totale è numerica, perché è stata forzata a numerica moltiplicandola per 1.
Desidererei un aiuto per sapere il perché. Grazie

lanvoel

esercizio originale

codice:

<HTML>
<HEAD>
<TITLE>onchange</TITLE>
<SCRIPT TYPE="text/javascript">
//Funzione totalizzatrice dei valori inseriti
function tot() 
{
  var totale=0;
  for(i=0;i<3;i++)
  //moltiplicando per 1 si "forza" a numerico
    totale+=document.forms[0].elements[i].value*1;
  document.modulo.totale.value=totale;
}
function foc() 
{
  document.modulo.num1.select()
  document.modulo.num1.focus()
}
function canc() 
{
  for(i=0;i<4;i++)
    document.forms[0].elements[i].value="";
}
</SCRIPT>
</HEAD>
<BODY>
<H3>FORM. Campo INPUT. Evento onChange</H3><HR>
<FORM NAME="modulo">
1° cifra:<INPUT TYPE="text" NAME="num1" size="10" onChange="tot()" STYLE="text-align: right"><BR>
2° cifra:<INPUT TYPE="text" NAME="num2" size="10" onChange="tot()" STYLE="text-align: right"><BR>
3° cifra:<INPUT TYPE="text" NAME="num3" size="10" onChange="tot()" STYLE="text-align: right"><BR>
Totale:  
<INPUT TYPE="text" NAME="totale" SIZE="15" READONLY onFocus="foc()" STYLE="text-align: right">
<INPUT TYPE="button" VALUE="canc"  onclick="canc()">
</form>
</FORM>
</BODY>
</HTML>

esercizio modificato

codice:

<HTML>
<HEAD>
<TITLE>onchange</TITLE>
<SCRIPT TYPE="text/javascript">
//Funzione totalizzatrice dei valori inseriti
function tot() 
{
  var totale=0;
  for(i=0;i<3;i++)
  //moltiplicando per 0 si "forza" a numerico
    totale+=document.forms[0].elements[i].value*1;
    //document.modulo.fieldset1.totale.value=totale;
    document.forms[0].elements[4].value=totale;
}
function foc() 
{
  document.modulo.num1.select()
  document.modulo.num1.focus()
}
function canc() 
{
  for(i=0;i<4;i++)
    document.forms[0].elements[i].value="";
}
</SCRIPT>
</HEAD>
<BODY>
<center>
<H3>FORM. Campo INPUT. Evento onChange</H3><HR>
<FORM NAME="modulo">
<fieldset name="fieldset1" style="background-color:'cyan'; width:300px; height:160px">
<legend> somma di 3 numeri</legend>
<br>
1° numero:<INPUT TYPE="text" NAME="num1" size="10" onChange="tot()" STYLE="text-align: right"><BR>
2° numero:<INPUT TYPE="text" NAME="num2" size="10" onChange="tot()" STYLE="text-align: right"><BR>
3° numero:<INPUT TYPE="text" NAME="num3" size="10" onChange="tot()" STYLE="text-align: right"><BR>
Totale:  
<INPUT TYPE="text"  NAME="totale" SIZE="15" READONLY onFocus="foc()" STYLE="text-align: right">
<INPUT TYPE="button" VALUE="canc"  onclick="canc()">
</fieldset>
</FORM>
</center>
</BODY>
</HTML>

**KillerWorm** · 07-05-2018, 12:57

Ci sono dei "conflitti" nella logica che utilizzi per recuperare i valori dagli elementi del modulo.

Sostanzialmente stai ciclando i membri della collection per l'elemento modulo dove, nel primo caso ci sono solo degli elementi input, mentre nel secondo caso è presente anche lo stesso elemento fieldset che hai aggiunto.

Infatti questo elemento fieldset è parte dei membri della collection di modulo così come lo sono tutti gli altri input. Avrai quindi che nel primo caso l'elemento document.forms[0].elements[0] (il primo che viene esaminato nel ciclo) è un input mentre nel secondo è un fieldset.

Ora, tu stai recuperando il valore della proprietà value per ciascuno di questi elementi, ma l'elemento fieldset non ha questa proprietà, quindi il valore restituito è undefined. Questo valore di norma non può essere convertito in un valore numerico; per questo motivo, quando cerchi di convertirlo in numero, viene restituito il valore NaN che di conseguenza rende NaN il risultato della somma con gli altri valori.

Per risolvere dovresti tuttalpiù ciclare i membri della collection del solo elemento fieldset e non dell'intero modulo.
La collection da ciclare sarebbe quindi:

codice:

 document.modulo.fieldset1.elements

Qualche consiglio:

Per forzare la conversione in numero hai moltiplicato per 1 il valore restituito, ma puoi usare un metodo ancora più stringato che è quello di anteporre un semplice + al valore. Ad ogni modo con entrambi questi metodi si ottiene un risultato equiparabile all'uso della più specifica funzione Number(), utilizzata appunto per convertire un qualsiasi valore in uno di tipo numerico.

La riga di script dentro il ciclo potrebbe quindi essere impostata in questo modo:

codice:

totale+= +document.modulo.fieldset1.elements[i].value;

Precisiamo però che anche convertendo i valori degli input in numero, questo non ti assicura che non venga digitato un valore non convertibile in numero, ad esempio una serie di caratteri alfabetici o qualsiasi altro carattere che di fatto non rappresenti un numero, per il quale otterresti comunque un valore NaN che comprometterebbe l'intero risultato.
In tal caso dovresti aggiungere ulteriori controlli, magari anche preventivi, per assicurare solo l'inserimento di valori numerici; ad esempio potresti usare elementi <input> di tipo number, oppure impostare opportunamente l'attributo pattern per ottenere una convalida per l'inserimento di soli numeri, o ancora meglio controllare e limitare direttamente via JavaScript l'inserimento di ogni singola digitazione all'interno degli input così da bloccare i valori non consentiti.

Vedi tu, buon proseguimento.

**lanvoel** · 07-05-2018, 22:38

Grazie per la spiegazione KillerWorm e anche per i consigli
lanvoel

codice:

<HTML>
<HEAD>
<TITLE>onchange</TITLE>
<SCRIPT TYPE="text/javascript">
//Funzione totalizzatrice dei valori inseriti
function tot() 
{
  var totale=0;
  for(i=1;i<=3;i++)
  //moltiplicando per 1 si "forza" a numerico
  // o anche ponendo + prima dell'espressione
{
   //totale+=document.forms[0].elements[i].value*1;
   totale+=+document.forms[0].elements[i].value;
}
  document.forms[0].elements[4].value=totale;
}
function foc() 
{
  document.modulo.num1.select()
  document.modulo.num1.focus()
}
function canc() 
{
  for(i=1;i<=4;i++)
    document.forms[0].elements[i].value="";
}
</SCRIPT>
</HEAD>
<BODY>
<H3>FORM. Campo INPUT. Evento onChange</H3><HR>
<center>
<FORM NAME="modulo">
<fieldset name="fieldset1" style="background-color:'cyan'; width:300px; height:200px;">
<legend> somma di 3 numeri</legend>
<br>
1° numero:<INPUT TYPE="text" NAME="num1" size="10" onChange="tot()" STYLE="text-align: right"><BR>
2° numero:<INPUT TYPE="text" NAME="num2" size="10" onChange="tot()" STYLE="text-align: right"><BR>
3° numero:<INPUT TYPE="text" NAME="num3" size="10" onChange="tot()" STYLE="text-align: right"><BR><br>
Totale:  
<INPUT TYPE="text" NAME="totale1" SIZE="15"  onFocus="foc()" STYLE="text-align: right">
<INPUT TYPE="button" VALUE="canc"  onclick="canc()">
</fieldset>
</FORM>
</center>
</BODY>
</HTML>

Discussione: Scrive NaN invece di un numero

Strumenti discussione

Ricerca discussione

Visualizza

Scrive NaN invece di un numero

Permessi di invio