Valeur numérique d'un champs de formulaire is Not a Number (NaN)

07 juil. 2008, 19:24

Bonjour,

je rencontre un problème, en souhaitant faire une addition de deux champs de formulaire en Javascript.

document.getElementById("montantPretRelaisDisabled").value = parseInt(document.getElementById("pretRelaisValeurBien")) + parseInt(document.getElementById("pretRelaisCapitalARembourser"));

Cela me renvoie "NaN" c'est à dire que la valeur n'est pas considérée comme un nombre.

j'ai essayé un

Code : Tout sélectionner

alert(parseInt(document.getElementById("pretRelaisValeurBien")));

pareil, erreur NaN. pourtant je ne rentre que des chiffres dans mon input.. D'où vient l'erreur ?

merci d'avance.

EDIT : je viens de rajouter .value à la fin de mes document.getElementById, et je me retrouve avec

document.getElementById("pretRelaisValeurBien") is null

.

Comment corriger cela ?

08 juil. 2008, 09:46

Fais nous voir ton code avec le formulaire stp.
A titre d'exemple ce code fonctionne :

Code : Tout sélectionner

<script type="text/javascript">
function addition()
{
document.getElementById("montantPretRelaisDisabled").value = parseInt(document.getElementById("pretRelaisValeurBien").value) + parseInt(document.getElementById("pretRelaisCapitalARembourser").value); 
}

</script>

Tu peux aussi te servir de la fonction isNan() pour vérifier tes valeurs avant de les additioner.


<form name="form">
<input type="text" name="pretRelaisValeurBien" id="pretRelaisValeurBien"/>
<input type="text" name="pretRelaisCapitalARembourser" id="pretRelaisCapitalARembourser"/>
<input type="button" onclick="addition()" value="Addition"/>
<input type="text" disabled="true" name="montantPretRelaisDisabled" id="montantPretRelaisDisabled"/>
</form>

08 juil. 2008, 15:17

Voila le code de mon form :

Code : Tout sélectionner

<tr>
        <td width="250">Pr&ecirc;t relais :</td>
        <td>
        	<select name="pretRelais" onchange="insertPretRelais(this.value);">
            	<option value="non">Non</option>
                <option value="oui">Oui</option>
        	</select>
        </td>
      </tr>
      <tr>
      	<td id="pretRelaisAdd01"></td>
        <td id="pretRelaisAdd02"></td>
      </tr>
      <tr>
      	<td id="pretRelaisAdd03"></td>
        <td id="pretRelaisAdd04"></td>
      </tr>
      <tr>

Et la fonction JS qui insère les nouveaux inputs, sur le onChange du <select> :

Code : Tout sélectionner

function insertPretRelais(selectValue) {
	if(selectValue == 'oui') {
		document.getElementById('pretRelaisAdd01').innerHTML = 'Valeur du bien :';
		document.getElementById('pretRelaisAdd02').innerHTML = '<input type="text" name="pretRelaisValeurBien" id="pretRelaisValeurBien" onfocus="this.id=\'active\';" onblur="this.id=\'\';" onKeyUp="calculMontantPretRelais()" />';
		document.getElementById('pretRelaisAdd03').innerHTML = 'Capital du cr&eacute;dit &agrave; rembourser :';
		document.getElementById('pretRelaisAdd04').innerHTML = '<input type="text" name="pretRelaisCapitalARembourser" id="pretRelaisCapitalARembourser" onfocus="this.id=\'active\';" onblur="this.id=\'\';" onKeyUp="calculMontantPretRelais()" />';
	}
}

EDIT : trouvé d'où venait l'erreur. C'etait à cause de mes

Code : Tout sélectionner

onfocus="this.id=\'active\';" onblur="this.id=\'\';"

qui me permettent de changer la bordure de l'input lorsque celui-ci a le focus. Comment puis-je garder cette fonctionnalité, tout en faisant marcher le script d'addition ? j'ai essayé de transformer mes getElementById en getElementsByClassName (ou specifiant class="pretRelaisAdd01" à la place de id="pretRelaisAdd01"), mais ça ne fonctionne pas.

08 juil. 2008, 15:45

Pour changer de style il ne faut effectivement pas effacer l'id sinon ton code ne marchera pas.

Par contre tu peux envisager une solution de ce type :

Dans ton css du déclares une classe "active":

Code : Tout sélectionner

.active
{
	border:2px red solid;
}

Et dans ton code tu utilises l'attribut className pour dire que quand on a le focus la classe est "active" sinon la classe est "normale".

Code : Tout sélectionner

document.getElementById('pretRelaisAdd02').innerHTML = '<input type="text" name="pretRelaisValeurBien" id="pretRelaisValeurBien" onfocus="this.className=\'active\';" onblur="this.className=\'normal\';" onKeyUp="calculMontantPretRelais()" />';

Par contre je suis pas sur que le .innerHTML marche sur des éléments de type <td>, tu devrais peut etre déclarer dans tes colonnes une div à la place...

Code : Tout sélectionner

      <tr> 
         <td><div id="pretRelaisAdd01"></div></td> 
        <td><div id="pretRelaisAdd02"></div></td> 
      </tr>

Enfin si ca marche comme ca... Mais en tous cas il ne faut pas toucher à l'id

Au passage, pour ton problème de bordure il existe un attribut focus dans les css qui fait ca "tout seul" :

Code : Tout sélectionner

input:focus
{
	border:2px red solid;
}

mais ca marche pas avec IE... (http://www.w3schools.com/CSS/pr_pseudo_focus.asp)

08 juil. 2008, 15:50

Au passage, pour ton problème de bordure il existe un attribut focus dans les css qui fait ca "tout seul" :

Code : Tout sélectionner
input:focus { border:2px red solid; }
mais ça marche pas avec IE... (http://www.w3schools.com/CSS/pr_pseudo_focus.asp)

Oh génial ça, je connaissais pas. Effectivement, marche pas sous IE, je viens de tester. Vais essayer ta méthode avec les class.

Ok, tout fonctionne comme je le souhaite. merci bien.

Valeur numérique d'un champs de formulaire is Not a Number (NaN)

Qui est en ligne