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