11521 sujets

JavaScript, DOM et API Web HTML5

Calcul automatique en html

Je souhaite faire une multiplication automatique dès que l'on a entrer les 2 nombres à multiplier.
Merci pour votre aide
Cordialement
Modérateur
Bonjour,

Il faut utiliser du Javascript pour écouter les modifications de deux input et faire la multiplication puis afficher le résultat.

Bonne soirée
Bonsoir Jean pierre et merci pour le code.
J'ai deux petit soucis...
Quand je fais un copier coller de ton code dans NVU ou KOMPOSER, il est automatiquement transformé à l'enregistrement de la manière suivante:

<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#pge {display:block;width:100px;margin:30px auto;}
input {width:100%;text-align:center}
</style>
<title></title>
</head>
<body>
<div id="pge"> <input
onblur="$('rsp').innerHTML=(+this.value)+
(+this.nextSibling.value)"
type="text"><input
onblur="$('rsp').innerHTML=(+this.value)+(+this.previousSibling.value)"
type="text">
<p>Total : <span id="rsp"></span></p>
</div>
<script>
function $(i){return document.getElementById(i)}
</script>
</body>
</html>

Même en entrant le code manuellement, c'est pareil.
Le deuxième soucis est que j'obtiens une addition et non une multiplication, j'ai changé les + en * mais ça se plante...
Merci pour ton dévouement
Cordialement
Prière d'utiliser la colorisation syntactique, et l'indentation, ça aide!

<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      #pge {display:block;width:100px;margin:30px auto;}
      input {width:100%;text-align:center}
    </style>
    <title></title>
  </head>
  <body>
   <div id="pge">
      <input onblur="$('rsp').innerHTML=(+this.value)+(+this.nextSibling.value)"
          type="text">
       <input onblur="$('rsp').innerHTML=(+this.value)+(+this.previousSibling.value)"
           type="text">
      <p>Total : <span id="rsp"></span></p>
    </div>
  <script>
      function $(i){return document.getElementById(i)}
    </script>
  </body>
</html>

Ce que je comprends c'est que tes éditeurs se veulent "plus malins" que toi et changent l'ordre des attributs dans le code, ajoutent un <title>, etc.
C'est pas idiot, mais personnellement je n'aime pas qu'un outil fasse cela sans que je lui demande expressément.
Concernant les "+" à remplacer par "*" il ne faut pas tous les remplacer, car
le + de "+this.value" set à assurer que c'est bien un nombre et pas une chaîne de caractère qui sera pris en compte dans l'opération. si tu les remplaces par des "*" "ça va pas l'faire", comme on dit.
on doit donc avoir

       <input onblur="$('rsp').innerHTML=(+this.value)*(+this.nextSibling.value)"
          type="text">
       <input onblur="$('rsp').innerHTML=(+this.value)*(+this.previousSibling.value)"
           type="text">

@JPB: je vois que tu as fait comme moi: tout ce que tu as gardé de jQuery c'est $('id') Smiley cligne
Modifié par PapyJP (18 Apr 2020 - 12:49)
Bonjour archic1,
Perso, j'ai été obligé de changer previousSibling par previousElementSibling
et nextSibling par nextElementSibling.
Tu peux aussi changer le onblur par le oninput si tu veux
Merci JP et aliasdmc, ca marche. En changeant le onblur par oninput le calcul se fait automatiquement, super !
Maintenant je vais essayer "seul" de mettre les cases de saisie l'une à coté de l'autre et rajouter une case pour le résultat...

Merci encore les gars.

Bien cordialement
Salut les gars,

En partie grâce à votre aide j'ai put réaliser le code que j'aimerais bien vous passer, mais même avec un copier/coller a partir de notepad, ou le code a une colorisation et une indexation correcte, mon code reste noir et sans indexation dans le forum.
Si vous avez un tuyau je suis preneur.

Je vous joints l'image du résultat de mon travail. Il reste à multiplier le résultat de la surface calculée par le tarif au cm2 (protégé en écriture) et afficher le résultat TTC.
J'y bosse.......

Merci d'avance.

Cordialement
Bonjour archic1,
Utilise la "Colorisation syntaxique" en dessous du bloc de saisie, mais il ne fait pas l'indexation
Ok j'ai vu !!!
J'ai cliqué sur les propositions "code, HTML et javascript", j'espère que ca a marché.
Voila donc le code....

<html>
<head>
  <meta charset="utf-8">
  <style type="text/css">
#pge {display:block;width:100px;margin:30px auto;}
input {width:100%;text-align:center}
  </style>
  <title>essai2</title>
</head>
<body>
<table
 style="text-align: left; background-color: rgb(222, 184, 135); width: 383px; height: 186px;"
 border="0" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="background-color: rgb(222, 184, 135);"></td>
      <td></td>
      <td style="text-align: center; font-weight: bold;"
 valign="undefined"><small>Entrez
vos dimensions en cm</small></td>
    </tr>
    <tr>
      <td
 style="height: 152px; width: 150px; text-align: center; vertical-align: middle;"
 src="Jimshop/images/carre.jpg"><img alt=""
 src="Jimshop/images/carre.jpg"><br>
      </td>
      <td
 style="width: 30px; vertical-align: top; text-align: right; background-color: rgb(222, 184, 135);"><br>
      <br>
      <span style="font-weight: bold;">A</span><br
 style="font-weight: bold;">
      <span style="font-weight: bold;">B</span><br>
      </td>
      <td style="background-color: rgb(222, 184, 135);">
      <div id="pge"> <input
 oninput="$('rsp').innerHTML=(+this.value)*(+this.nextElementSibling.value)"
 type="text"><input
 oninput="$('rsp').innerHTML=(+this.value)*(+this.previousElementSibling.value)"
 type="text">
      <p><span style="font-weight: bold;">Total :</span>
      <span id="rsp"
 style="color: rgb(247, 62, 25); font-weight: bold;"></span></p>
      </div>
      <big><big>
      <script>
function $(i){return document.getElementById(i)}
      </script></big></big></td>
    </tr>
  </tbody>
</table>
<table
 style="text-align: left; background-color: rgb(222, 184, 135); width: 383px; height: 32px;"
 border="0" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="width: 162px; text-align: center;"><span><span
 style="font-weight: bold;">Tarif TTC au cm2</span> </span><input
 disabled="disabled" value="0.12" autofocus=""
 maxlength="5" size="20" class="numeric"
 align="center" type="text"> </td>
      <td></td>
    </tr>
  </tbody>
</table>
<br>
</body>
</html>
J'ai fait l'essai sur une copie de mon fichier mais plus rien ne fonctionne.
Voila mon code:

<input
addEventListener('input',ftc)="$('rsp').innerHTML=(+this.value)*(+this.nextElementSibling.value)"
type="text">


Quelle amélioration me procure le remplacement sur le fonctionnement ?

Merci encore
Sujet clos
Aller à