multiplier avec onkeyup

**BRUNO71** · 16/04/2012, 10h13

Bonjour,

Peut-on multiplier diretement avec onkeyup ?

Je m'explique avec ce 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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<html>
     <head>
 
         <title></title>
         <script type="text/javascript">
<!--
function Somme(){
   var resultat=0;
   var result = document.getElementById('resultat');
   for(var i = 1; i<=3; i++){
      var element = document.getElementById('Nb_'+i);
      if(element.value!='' && !isNaN(element.value)){
         resultat += parseInt(element.value);
 
      }
 
   }
   result.value = resultat;
}
//-->
 
         </script>
 
     </head>
     <body>
 
   <form method="post">
   <input id="Nb_1" name="H" type="text" onkeyup="Somme();"><br>
   <input id="Nb_2" name="C" type="text" onkeyup="Somme();"><br>
   <input id="Nb_3" name="A" type="text" onkeyup="Somme();"><br>
   <input id="resultat" name="resultat" type="text">
 
</form>  
        </body>
 </html>

Je souhaiterais dans l'input (H) multiplier en permanence par 5 ...
Dans l'input (C) multiplier en permanence par 10 ....
J�ai essay� tout b�tement comme ceci :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
   <form method="post">
   <input id="Nb_1" name="H" type="text" onkeyup="Somme()*5;"><br>
   <input id="Nb_2" name="C" type="text" onkeyup="Somme()*10;"><br>
   <input id="Nb_3" name="A" type="text" onkeyup="Somme();"><br>
   <input id="resultat" name="resultat" type="text">
 
</form>

Mais sans r�sultat�
D�j�, est-ce possible ?

Si oui, vous vous doutez de ma question.....

Comment ?

Merci pour votre explication...

Cordialement

**SPACHFR** · 16/04/2012, 10h53

Bonjour,

Je ne sais pas trop ce que tu veux faire mais voici un exemple
(j'ai supprim� les contr�les je te laisse les ajouter).
Ici lorsque tu entre une valeur dans un input, tu passes l'object (l'�l�ment html via this et la valeur avec laquelle tu veux multipler.

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
19
20
21
22
23
24
25
26
27
 
<html>
     <head>
 
         <title></title>
         <script type="text/javascript">
<!--
function Somme(obj,n){
   var i = document.getElementById(obj.id).value;
   document.getElementById("resultat").value = i*n;
}
//-->
 
         </script>
 
     </head>
     <body>
 
   <form method="post">
   <input id="Nb_1" name="H" type="text" value=""onkeyup="Somme(this,5);"><br>
   <input id="Nb_2" name="C" type="text" onkeyup="Somme(this,10);"><br>
   <input id="Nb_3" name="A" type="text" onkeyup="Somme(this,20);"><br>
   <input id="resultat" name="resultat" type="text">
 
</form>  
        </body>
 </html>

**Bovino** · 16/04/2012, 11h08

multiplier avec onkeyup

Tu as d�j� presque r�ussi : tu as su multiplier les erreurs li�es � onkeyup !

Plus s�rieusement, pour pouvoir exploiter le r�sultat d'une fonction, il faut que celle-ci renvoie un r�sultat.

Dans ton cas, la fonction Somme() ne renvoie rien, donc tu peux multiplier ce rien par tout ce que tu veux, tu auras toujours rien !

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

return resultat;

serait donc un bon d�but.

Ensuite,

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

onkeyup="Somme()*5;"

c'est tr�s bien tu as fait une multiplication, mais le r�sultat de cette multiplication, tu en fais quoi ensuite ?

**BRUNO71** · 16/04/2012, 11h29

Bonjour,

En fait je veux r�aliser un convertisseur sur un site intranet....
Le calcul ce fait directement et multiplie par un chiffre d�termin� par avance....Personne ne peux le modifier...
Exemple :
(Input H multipli� par 5) + (Input C multipli� par 10) + (Input A multipli� par 2) ...
Je viens de r�aliser ce 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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html>
     <head>
 
         <title></title>
 
         <script type="text/javascript">
<!--
function Multiplier(obj,n){
   var i = document.getElementById(obj.id).value;
   document.getElementById("resultat").value = i*n;
}
 
function Somme(){
   var resultat=0;
   var result = document.getElementById('resultat');
   for(var i = 1; i<=3; i++){
      var element = document.getElementById('Nb_'+i);
      if(element.value!='' && !isNaN(element.value)){
         resultat += parseInt(element.value);
 
      }
 
   }
   result.value = resultat;
}
//-->
 
         </script>
 
     </head>
     <body>
 
   <form method="post">
   <input id="Nb_1" name="H" type="text" onkeyup="Somme();Multiplier(this,5);"><br>
   <input id="Nb_2" name="C" type="text" onkeyup="Somme();Multiplier(this,10);"><br>
   <input id="Nb_3" name="A" type="text" onkeyup="Somme();Multiplier(this,2);"><br>
   <input id="resultat" name="resultat" value="..." type="text">
 
</form>  
        </body>
 </html>

Mais je n'ai pas l'addition de l'ensemble ?

**F.Margaine** · 16/04/2012, 12h56

Voici un cas parfait pour la balise <output> !

Sinon, je pense que tu te compliques la vie. Premi�rement, il faut savoir que tu peux ajouter un �v�nement � tout ton formulaire d'un coup ! Apr�s, tu vas pouvoir r�cup�rer l'�l�ment cliqu� gr�ce � l'event bubbling.

Ensuite, il est conseill� d'utiliser onkeypress au lieu d'onkeyup. Il est mieux support� sur les navigateurs.

Enfin, tu peux utiliser "switch" dans le code en javascript pour d�finir les cas particuliers (H, C, A) et choisir que faire en fonction de.

Exemple en 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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
document.forms[0].onkeypress = function( e ) {
  // Deux lignes pour détourner les bugs d'IE
  var evt = e || window.event,
       target = evt.target || evt.srcElement
 
  // A ce moment-là, la variable "target" contient l'élément qui a déclenché l'évènement
 
  // On récupère tous les éléments du formulaire. "this" correspond à "document.forms[0]" sur lequel on enregistre l'évènement.
  var els = this.elements
 
  // On initialise une variable à 0, elle contiendra le résultat
  var res = 0
 
  // On boucle parmi tous les éléments du formulaire
  for ( var i = 0, len = els.length; i < len; i++ ) {
 
    // Pour la suite, au lieu de devoir ajouter la fonction Somme() partout avec le chiffre dans le HTML, tu peux utiliser le SWITCH :
    switch ( target.name ) { // En fonction du NAME de l'élément cliqué
 
      case 'H':
        res += els[i].value * 5
        break
 
      case 'C':
        res += els[i].value * 10
        break
 
      case 'A':
        res += els[i].value * 2
        break
    }
  }
 
  // Enfin, on utilise la valeur qu'on vient de calculer :-)
  document.getElementById('resultat').value = res     
}

**Bovino** · 16/04/2012, 13h01

Voici un cas parfait pour la balise <output> !

Je pense qu'il est plus prudent d'attendre que cette balise soit correctement support�e...

Ensuite, il est conseill� d'utiliser onkeypress au lieu d'onkeyup. Il est mieux support� sur les navigateurs.

Les deux �v�nements sont parfaitement support�s par tous les navigateurs

**F.Margaine** · 16/04/2012, 13h50

Envoy� par Bovino

Je pense qu'il est plus prudent d'attendre que cette balise soit correctement support�e...

Elle l'est ! On peut l'utiliser correctement d�s aujourd'hui

(petit d�tail : il faut ajouter une r�gle CSS pour qu'il soit stylable)

Les deux �v�nements sont parfaitement support�s par tous les navigateurs

Je me suis mal exprim� :-)

Le probl�me de onkeyup et onkeydown est qu'ils s'activent m�me lorsque n'importe quelle touche du clavier est appuy�e, y compris les touches Shift, etc.

L'�v�nement onkeypress ne s'active que lorsque qu'un caract�re est ins�r�.

**BRUNO71** · 16/04/2012, 16h50

Bonjour,

Alors l�....

Il me semble que la balise <output> n'est pas prise en charge par IE.
Je n'ai pas r�ussi � comprendre le r�sultat...
J'ai bricol� ce code....Ca fonctionne...

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<html>
     <head>
 
         <title></title>
 
         <script type="text/javascript">
<!--
function Multiplier_1(obj,n){
   var i = document.getElementById(obj.id).value;
   document.getElementById("resultat_1").value = i*n;
}
function Multiplier_2(obj,n){
   var i = document.getElementById(obj.id).value;
   document.getElementById("resultat_2").value = i*n;
}
function Multiplier_3(obj,n){
   var i = document.getElementById(obj.id).value;
   document.getElementById("resultat_3").value = i*n;
}
 
function calcul(formulaire)
 {
 if ((formulaire.resultat_1.value == "") || (formulaire.resultat_2.value == "") || (formulaire.resultat_3.value == "")) return;
 formulaire.resultat.value = parseFloat(formulaire.resultat_1.value) + parseFloat(formulaire.resultat_2.value) + parseFloat(formulaire.resultat_3.value);
 }
 
//-->
 
         </script>
 
     </head>
     <body>
 
  <form name="formulaire" id="formulaire" method="post" action="">
 
   <input id="Nb_1" name="H_1" type="text" onkeyup="Multiplier_1(this,10000);calcul(this.form);"><br>
   <input id="Nb_2" name="C_2" type="text" onkeyup="Multiplier_2(this,100);calcul(this.form);"><br>
   <input id="Nb_3" name="A_3" type="text" onkeyup="Multiplier_3(this,1);calcul(this.form);"><br>
   <br>
   <input id="resultat_1" name="resultat_1" type="hidden">
<input id="resultat_2" name="resultat_2"  type="hidden">
<input id="resultat_3" name="resultat_3"  type="hidden">
<br>
<br>
     <input id="resultat" name="resultat" type="text" readonly="readonly" >
 
 
 
 
</form> 
 
        </body>
 </html>

Peut-�tre y a t'il plus simple.... mais c'est compliqu�...
J'ai eu beau retourner le probl�me dans tous les sens, mais sans r�sultat..

multiplier avec onkeyup

JavaScript

Discussions similaires

Partager

Partager