JavaScript et la multiplication [Résolu]

majedz · 23/11/2012, 16h14

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

SylvainPV · 23/11/2012, 16h23

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

Bovino · 23/11/2012, 16h33

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

pc75 · 23/11/2012, 16h53

Bonjour,

Et comme ça ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

NoSmoking · 23/11/2012, 17h00

Bonjour,

Citation:

Envoyé par pc75

Et comme ça ?

relis bien la réponse de Bovino, cela n'est pas utile.

Bovino · 23/11/2012, 17h01

Aucune utilité !

Il suffit juste d'affecter le résultat à value au lieu de innerHTML

sekaijin · 23/11/2012, 18h03

Waaaarg

je suis un indécrotable

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

SylvainPV · 23/11/2012, 18h08

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

Auteur · 23/11/2012, 19h56

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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() ?

on ne peut pas faire de multiplication avec des flottants ?

SylvainPV · 23/11/2012, 20h52

Citation:

Envoyé par Auteur

pourquoi parseInt() ?

on ne peut pas faire de multiplication avec des flottants ?

si bien sûr. parseFloat pour les décimaux

Bovino · 23/11/2012, 21h11

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

console.log(typeof +"6");

sekaijin · 23/11/2012, 21h49

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

alors que certaine de ces valeurs vont généré une erreur avec un transtypage
A+JYT

Bovino · 23/11/2012, 22h04

En même temps, tu n'avais pas parlé de transtypage toi !

Je voulais juste chipoter, mais comme toujours, tes commentaires sont précis et judicieux !

majedz · 24/11/2012, 10h19

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

23/11/2012, 16h33	#3
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 18 093 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 42 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 18 093 Points : 64 586 Points : 64 586	Code : Sélectionner tout - Visualiser dans une fenêtre à part 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. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

23/11/2012, 17h01	#6
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 18 093 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 42 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 18 093 Points : 64 586 Points : 64 586	Aucune utilité ! Il suffit juste d'affecter le résultat à value au lieu de innerHTML __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

23/11/2012, 21h11	#11
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 18 093 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 42 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 18 093 Points : 64 586 Points : 64 586	Bon, ben pour les "indécrottables", l'opérateur de transtypage, c'est +, pas parseInt() ni parseFloat() Code : Sélectionner tout - Visualiser dans une fenêtre à part console.log(typeof +"6"); __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

23/11/2012, 22h04	#13
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 18 093 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 42 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 18 093 Points : 64 586 Points : 64 586	En même temps, tu n'avais pas parlé de transtypage toi ! Je voulais juste chipoter, mais comme toujours, tes commentaires sont précis et judicieux ! __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email