Discussion :

[Alain17]

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 html :

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

[mathieu]

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

[Toufik83]

Bonjour,

Tu attaches 139 écouteurs d'événements comme ça ?. 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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

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
 
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();
    }
  });
};

[NoSmoking]

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

Code html :

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

[Alain17]

Bonsoir Toufik83 et Nosmoking,

merci pour votre aide précieuse.

Le code donné par Toufi83 fonctionne parfaitement.

Génial, merci mille fois.

Alain