multiplier avec onkeyup

Version imprimable

Bonjour,

Peut-on multiplier diretement avec onkeyup ?:calim2:
Je m'explique avec ce code :

Code:

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:

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 ? :oops:
Si oui, vous vous doutez de ma question.....:roll:
Comment ?

Merci pour votre explication...

Cordialement

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:

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>

16/04/2012, 11h08
Bovino

Citation:

multiplier avec onkeyup

Tu as déjà presque réussi : tu as su multiplier les erreurs liées à onkeyup ! :aie:
:pastaper:

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:

return resultat;

serait donc un bon début.

Ensuite,

Code:

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 ?

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:

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 ?

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:

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     
}

16/04/2012, 13h01
Bovino

Citation:

Voici un cas parfait pour la balise <output> !

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

Citation:

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 :?
16/04/2012, 13h50
F.Margaine

Citation:

Envoyé par Bovino

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

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)

Citation:

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é.

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...:oops:

Code:

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..