Faire total automatique

17 déc. 2008, 12:24

Bonjour à tous, nous n'arrivons pas à faire le total dans le script suivant:

<script type="text/javascript"> 
function calcul(surf) 
 { 
 document.getElementById('result').innerHTML = Math.ceil(parseFloat(surf) * 5); 
  }

function calcul2(surf2) 
 { 
 document.getElementById('result2').innerHTML = Math.ceil(parseFloat(surf2) / 3); 
  }

function total(result,result2) 
 { 
 	var result=document.getElementById('result').value;
	var result2=document.getElementById('result2').value;
	
	if(!parseFloat(result)) { 
        result = 0; } 
	if(!parseFloat(result2)) { 
        result2 = 0; } 

document.getElementById('total1').innerHTML = parseFloat(result) + parseFloat(result2) ; 
  }
</script>

<form id="form" action="" method="post"> 
  Surface :<br> 
      <input type="text" name="surf" id="surf" value="" size="15" maxlength="40" onkeyup="calcul(this.value);" /> <span id="result"></span>
<br><br>
  Surface 2 :<br> 
      <input type="text" name="surf2" id="surf2" value="" size="15" maxlength="40" onkeyup="calcul2(this.value);" /> <span id="result2"></span>
<br>
<!-- J'ai essayé les 2 façons pour afficher le total. -->
total : <span id="total1"></span>
<br>
<!-- ou -->
<br>
<input type='button' onclick='total();' value='Calculer total'> 
<input type="text" name="total1" id="total1" size="4">
</form>

Nous avons essayé plusieurs possibilités mais sa ne fonctionne pas.
Merci pour aide

17 déc. 2008, 12:51

Ah, je vois que tu agis sur des champs input.. je ne pense pas que tu puisses déterminer la valeur d'un champ input avec innerHTML.. si ça marche, c'est bizarre (mais pas impossible). J'essayerais plutôt de définir tout de suite la valeur avec value, au lieu de innerHTML (dans tes deux fonctions "calcul").

Pour ce qui est de ta fonction:

Code : Tout sélectionner

function total(result,result2)
 {
    var result=document.getElementById('result').value;
   var result2=document.getElementById('result2').value;
   
   if(!parseFloat(result)) {
        result = 0; }
   if(!parseFloat(result2)) {
        result2 = 0; }

document.getElementById('total1').innerHTML = parseFloat(result) + parseFloat(result2) ;
  }

On n'y est pas encore.. pourquoi prendre en paramètre des variable alors que tu les réassigne dés le début ? Soit tu ne mets pas les variables en paramètre, soit tu ne changes pas leur valeur en début de fonction.
Imaginons que tu ne veux pas les passer en paramètre.

Code : Tout sélectionner

function total()
 {
  var result=document.getElementById('result').value;
  var result2=document.getElementById('result2').value;
 (...)

Ces valeurs sont des entiers, pas des valeurs flottantes comma avant.

Il vaut donc mieux utiliser parseInt, et on va le faire dés le début:

Code : Tout sélectionner

function total()
 {
  var result=parseInt(document.getElementById('result').value);
  var result2=parseInt(document.getElementById('result2').value);
 (...)

Suite à ça, pour vérifier qu'il s'agit bien de nombres, on peut utiliser la fonction isNaN() :

Code : Tout sélectionner

(...)
if (!isNaN(result)) {
 result = 0
}

if (!isNaN(result2) {
 result2 = 0
}
(...)

Et par la suite on est sur qu'il s'agit d'entiers, donc il devient inutile d'utiliser parseFloat() ou parseInt(), leur addition donnera automatiquement la valeur attendue (la somme quoi).

Tu peux jouer avec des alert() sur le résultat, pour voir si ça va bien, et localiser l'erreur.

17 déc. 2008, 15:51

En fait on avait mis un input parce-que l'on arrivait pas à faire le total automatique (<span id="total1"></span>) au fur et à mesure de la saisie. Il est vrai que sur 2 champs ce n'est pas genant mais quand on à 5 ou 6 résultat à additionner le total auto permet un controle à la saisie.
Maintenant, j'ai changé les lignes:

Code : Tout sélectionner

function total() 
 { 
  var result=parseInt(document.getElementById('result').value); 
  var result2=parseInt(document.getElementById('result2').value); 

if (!isNaN(result)) { 
 result = 0 
} 

if (!isNaN(result2)) { 
 result2 = 0 
} 
//document.getElementById('total1').innerHTML = parseFloat(result) + parseFloat(result2) ; 
document.getElementById('total1').innerHTML = result + result2 
  }

Dans le <span id="total1"></span> la réponse est NaN
Le input reste vide.

17 déc. 2008, 16:25

Je vois que d'un côté tu utilisés:
document.getElementById('result').value

Et de l'autre:
document.getElementById('result').innerHTML

Or, ce sont deux choses différentes, qui ne se correspondent pas. Je dirais d'utiliser soit l'un, soit l'autre. Si tu utilises des inputs, je pencherais sur le .value .

A moins qu'il s'agit de données distinctes, mais j'en doute.

Que te dis un alert la dessus ? s'il en dit rien, c'est que les données ne sont pas ou elles sont censées être.

Code : Tout sélectionner

function total()
 {
  var result=parseInt(document.getElementById('result').value);
  var result2=parseInt(document.getElementById('result2').value); 
   alert ("Resultat 1 vaut:" + result + " et Resultat 2 vaut: " + result2);
   
 if (!isNaN(result)) {
 result = 0
 }

 if (!isNaN(result2)) {
 result2 = 0
 }
 //document.getElementById('total1').innerHTML = parseFloat(result) + parseFloat(result2) ;
 document.getElementById('total1').innerHTML = result + result2
  }

17 déc. 2008, 16:36

Aussi je pencherai vers un probleme dans l'utilisation de isNaN

isNaN signifie "is not a number" donc !isNaN() sera vraie que pour les nombres alors que à mon avis tu veux l'inverse

17 déc. 2008, 17:09

Aussi je pencherai vers un probleme dans l'utilisation de isNaN

isNaN signifie "is not a number" donc !isNaN() sera vraie que pour les nombres alors que à mon avis tu veux l'inverse

zuste !!

trop de négatif tue le négatif !!

17 déc. 2008, 17:40

Alert me renvoie [object]. Mais je préfererais renvoyer directement sans input sur le même principe des calculs précédent.
sur : <span id="total1"></span>
Je viens d'essayer la dernière correction et alert me renvoie NaN pour resultat 1 et 2.
Je vous pose la question sans mes modif de script qui peuvent vous induire en erreur : comment faire pour que le total de result plus result2 se calcule et s'affiche automatiquement?

Code : Tout sélectionner

<script type="text/javascript"> 
function calcul(surf) 
 { 
 document.getElementById('result').innerHTML = Math.ceil(parseFloat(surf) * 5); 
  }
function calcul2(surf2) 
 { 
 document.getElementById('result2').innerHTML = Math.ceil(parseFloat(surf2) / 3); 
  }
 
</script>

<form id="form" action="" method="post"> 
  Surface :<br> 
      <input type="text" name="surf" id="surf" value="" size="15" maxlength="40" onkeyup="calcul(this.value);" /> <span id="result"></span>
<br><br>
  Surface 2 :<br> 
      <input type="text" name="surf2" id="surf2" value="" size="15" maxlength="40" onkeyup="calcul2(this.value);" /> <span id="result2"></span>
<br>
<!-- comment faire pour que le  total de result plus result2 se calcule et s'affiche automatiquement. -->
total : <span id="total1"></span>
</form>

19 déc. 2008, 23:53

Salut, tupeut me dire si tu as trouvé une solution?
Merci.

21 déc. 2008, 11:25

Bonjour, non je n'arrive pas à le faire fonctionner. Soit j'ai une réponse vide, soit j'ai NaN.

27 févr. 2015, 11:25

Je déterre ce topic juste pour indiquer qu'il n'est pas conseillé d'utiliser des noms de variables correspondant a des ID d'élément HTML.
Si vous tapez directement result2 dans la console du navigateur , la réponse de ce dernier sera surement l'élément HTML d'id result2 et non la variable donc pour être clair dans le code vous additionnez un float avec un objet HTML ou inversement.
exemple:
parseFloat(2+'<input id="result2" value="123456789"/>') = 2
parseFloat('<input id="result2" value="123456789"/>'+2) = NaN
Note: test effectué sur chrome/Mozilla

27 févr. 2015, 12:18

Ce topic est vieux de 7 ans...

Faire total automatique

Qui est en ligne