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