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