Routine de calcul en JS

Version imprimable

Bonjour,

je cherche à réaliser un calculateur de volume dans Wordpress.

Voir l'exemple qui marche sur mon site : https://adopt-un-box.la-rochelle-web...me-formulaire/

Le problème : cet page calcule bien le volume nécessaire pour les 100 premiers objets. Mais le calcul, réalisé à partir d'un plugins sans doute "bridé", ne fonctionne pas pour les objets de 100 à 139 (il y a 139 objets en tout).

Le principe : l'utilisateur entre le nombre (Ni)de chaque objet présenté qu'il souhaite stocker dans un box.

Chaque objet a un volume défini et enregistré dans un champs input non visible (Vi)

Une fonction js appelée "Somme" doit :

- calculer le volume global appelé "total". Sous forme mathématique : total = somme(Ni x Vi)

- afficher les résultat dans l'input "total"

Je découvre le javascript et j'ai "bricolé" la fonction suivante fonction qui ne marche pas.

Tout d'abord le code HTML, puis le script js :
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 <input type="number" id="number-1"/><input type="number" name="volume-1"/><br/> <input type="number" id="number-2"/><input type="number" name="volume-2"/><br/> ... <input type="number" id="number-139"/><input type="number" name="volume-139"/><br/> <input type="number" id="total"/> <script type="text/javascript"> function somme() { "use strict"; var sommeRes = 0, i, NbObjets = 139; for (i = 1; i <= NbObjets; i += 1) { sommeRes += parseFloat(document.getElementById("number-" + i).value) * parseFloat(document.getElementById("volume-" + i).value); } // Si la sommeRes n’est pas définie on ne l’affiche pas. if (isNaN(sommeRes)) { sommeRes = ""; } document.getElementById("total").value = sommeRes; } window.onload = function () { "use strict"; document.getElementById("number-1").onchange = function () { somme(); }; document.getElementById("number-2").onchange = function () { somme(); }; ..... document.getElementById("number-139").onchange = function () { somme(); }; }; </script>
J'ai besoin de votre aide !

Quelqu'un de plus doué que moi peut-il m'expliquer pourquoi cette fonction ne marche SVP ?

Quel serait le code corrigé qui fonctionne SVP ?

Merci beaucoup !

Alain

01/12/2020, 13h40
mathieu

la formule que vous avez mis dans le shortcode "calculator" va seulement jusqu'à 99. votre soucis de calcul vient peut-être de là ?

Bonjour,

Tu attaches 139 écouteurs d'événements comme ça ?:weird:. il va falloir utiliser des boucles comme forEach par exemple et des méthodes de manipulation des éléments du DOM comme nextElementSibling pour récupérer le nœud suivant et querySelectorAll pour récupérer tous les éléments ayant un id commençant par "number-" :

Code:

1
2
3
4
 
<input type="number" min="0" id="number-1" /><input type="number" min="1"  value="1" /><br />
<input type="number" min="0" id="number-2" /><input type="number" min="1" value="1" /><br />
<input type="number" id="total" />

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
 
var inputsNumber = document.querySelectorAll('[id^=number-]'),
  sommeRes = 0,
  i, NbObjets = inputsNumber.length;
 
function somme() {
 
  sommeRes = 0;
  inputsNumber.forEach((elem) => {
    console.log(elem.id, elem.value);
    if (isNaN(elem.value)) elem.value = 1;
    sommeRes += elem.value * elem.nextElementSibling.value;
  });
  // Si la sommeRes n'est pas définie on le remplace par "".
  if (isNaN(sommeRes)) {
    sommeRes = "";
  }
  document.getElementById("total").value = sommeRes;
}
 
window.onload = function() {
  inputsNumber.forEach((elem) => {
    console.log(elem.id, elem.value);
    document.getElementById(elem.id).onchange = function() {
      somme();
    }
  });
};

Bonjour,
tu peux faire plus concis en utilisant l'événement change sur un élément <form>.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<form> 
  <p><input type="number" min="0"><input type="number" min="1" value="1">
  <p><input type="number" min="0"><input type="number" min="1" value="1">
  <hr>
  <p><output></output>
</form>
<script>
const elNumbers = document.querySelectorAll("[type='number']");
const elOut = document.querySelector("output");
document.querySelector("form").addEventListener("change", calcul);
 
function calcul() {
  let somme = 0;
  elNumbers.forEach((el) => {  // d'autres méthodes possibles
    somme += +el.value;
  });
  elOut.textContent = somme;
}
</script>

il suffit ensuite de décliner pour adapter au besoin.

01/12/2020, 19h27
Alain17

Bonsoir Toufik83 et Nosmoking,

merci pour votre aide précieuse.

Le code donné par Toufi83 fonctionne parfaitement.

Génial, merci mille fois.

Alain