JavaScript et la multiplication

Version imprimable

bonjour et merci pour votre coup d'oeil .
j'ai essayé de faire la multiplication par des simple codes en JSP...voici le code:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <html> <head> <script> function prod(){ var i=document.getElementById("fr").value; var j=document.getElementById("sd").value; var k=i*j; document.getElementById("rst").innerHTML=k; } </script> </head> <body> <p> <input type="text" id="fr"/>x<input type="text" id="sd"/>=<input type="text" id="rst"/><br/> <input type="button" value="produit" onclick="prod()"/> [</p> </body> </html>
quand j'exécute cette page...et après avoir appuyer sur le bouton produit...la zone réservée pour l'affichage le produit reste vide....donc il y a quelque chose qui ça va pas:(:(:(
j'attend vos remarques....et merci d'avance.

23/11/2012, 16h23
SylvainPV
Bonjour,

Tout d'abord tu parles de JSP, mais il n'y en a pas dans ton code. Attention aux confusions.

Ensuite, tes input sont de type text. Ce qui signifie que tu peux rentrer des lettres et pas seulement des chiffres. La valeur que tu récupères sera donc une string et pas un int. Tu peux soit utiliser la fonction parseInt :
Code:

1 2 3 var i= parseInt(document.getElementById("fr").value); var j=parseInt(document.getElementById("sd").value);
soit utiliser des <input type="number"> ; mais attention ce type n'est pas implémenté sur tous les navigateurs, donc par prudence mieux vaut rajouter le parseInt

Par ailleurs pour la suite, je t'invite à essayer la console d'erreurs Javascript (celle de chrome accessible par F12 est très bien) pour t'aider à débugger.
23/11/2012, 16h33
Bovino

Code:

document.getElementById("rst").innerHTML=k;

Un input étant une balise autofermante, elle ne possède pas de innerHTML...

@SylvainPV : si les valeurs des deux input est numérique, la multiplication effectuera elle-même le transtypage. Il n'y a que pour l'addition que ce n'est pas le cas car + est aussi l'opérateur de concaténation.

Bonjour,

Et comme ça ?

Code:

1
2
3
4
 
var i=document.getElementById("fr").value * 1;
var j=document.getElementById("sd").value * 1;
var k=i*j;

23/11/2012, 17h00
NoSmoking

Bonjour,

Citation:

Envoyé par pc75

Et comme ça ?

relis bien la réponse de Bovino, cela n'est pas utile.
23/11/2012, 17h01
Bovino

Aucune utilité ! :)
Il suffit juste d'affecter le résultat à value au lieu de innerHTML ;)

Waaaarg

je suis un indécrotable

Code:

1
2
3
4
5
6
7
8
 
try {
  var i=parseInt(document.getElementById("fr").value, 10);
  var j=parseInt(document.getElementById("sd").value, 10);
  var k=i*j;
} catch (err) {
   alert('les informations fournies ne sont pas de nombres: ' + err);
}

A+JYT

23/11/2012, 18h08
SylvainPV

Citation:

Envoyé par Bovino

@SylvainPV : si les valeurs des deux input est numérique, la multiplication effectuera elle-même le transtypage. Il n'y a que pour l'addition que ce n'est pas le cas car + est aussi l'opérateur de concaténation.

Ah, tu viens de m'apprendre un truc ! Donc "2"*"3" === 6
C'est fascinant mais je trouve quand même ça très moche :mrgreen:
23/11/2012, 19h56
Auteur
bonjour,

outre la remarque de Bovino sur les produits en javascript :

Citation:

Envoyé par SylvainPV

donc par prudence mieux vaut rajouter le parseInt
Citation:
Envoyé par sekaijin

Code:

1 2 3 4 var i=parseInt(document.getElementById("fr").value, 10); var j=parseInt(document.getElementById("sd").value, 10); var k=i*j;
pourquoi parseInt() ? :koi: on ne peut pas faire de multiplication avec des flottants ?
23/11/2012, 20h52
SylvainPV

Citation:

Envoyé par Auteur

pourquoi parseInt() ? :koi: on ne peut pas faire de multiplication avec des flottants ?

si bien sûr. parseFloat pour les décimaux
23/11/2012, 21h11
Bovino

Bon, ben pour les "indécrottables", l'opérateur de transtypage, c'est +, pas parseInt() ni parseFloat() ;)

Code:

console.log(typeof +"6");

Oui effectivement
parseInt et parseFloat ne sont pas des opérateur de transtypage

mais pour une saisie soit on transtype est donc cela nessecite une saisie stricte
soit on parse et on accept des petite chose
Code:

1 2 3 4 5 6 7 8 9 10 11 12 parseInt("10"); parseInt("10.33") ; parseInt("34 45 66"); parseInt(" 60 "; parseInt("40 years"; parseInt("He was 40"; parseInt("10",10); parseInt("010"); parseInt("10",8); parseInt("0x10"); parseInt("10",16);
Code:

1 2 3 4 5 6 7 8 9 10 11 10 10 34 60 40 NaN 10 8 8 16 16
alors que certaine de ces valeurs vont généré une erreur avec un transtypage
A+JYT

23/11/2012, 22h04
Bovino

En même temps, tu n'avais pas parlé de transtypage toi ! :aie:
Je voulais juste chipoter, mais comme toujours, tes commentaires sont précis et judicieux ! :ccool:

merci beaucoup pour vos interventions

merci à : SylvainPV,Bovino,pc75,NoSmoking,sekaijin etAuteur pour vos bonnes interventions et pour vos explications.
le problème est bien résolu en se basant sur vos analyses....le code final est comme suit :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <html> <head> <script> function prod(){ var i=parseFloat(document.getElementById("fr").value); var j=parseFloat(document.getElementById("sd").value); var k=i*j; document.getElementById("rst").value=k; } </script> </head> <body> <p> <input type="text" id="fr"/>x<input type="text" id="sd"/>=<input type="text" id="rst"/><br/> <input type="button" value="produit" onclick="prod()"/> </p> </body> </html>
et après l’exécution, le résultat était parfait.
encore merci beaucoup pour votre collaboration.