Calculateur de volume en js

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.fr/calculateur-de-volume-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 :

<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

Ton code est pas très propre mais il marche.

Enfin si tous les input on des valeurs.

Le problème de ton code est que dès qu’un input est vide alors on a :

parseFloat(document.getElementById("number-" + i).value) qui donne je suppose NaN et après, ça se propage.

Ce que tu peux faire c’est : parseFloat(document.getElementById("number-" + i).value || 0)

Comme ça tu évites les NaN.

Bonne chance !

Bonsoir Ache,

merci pour ton aide précieuse.

On doit s’approcher de la bonne solution.

Toutefois, j’ai copié/collé le code proposé dans une page Wordpress de mon site et rien ne s’affiche dans le champ total.

Une idée ?

(PS : je ne connais le js comme tu peux le constater)

Merci ! Alain

Sans ton code et sans plus d’information non je ne peux pas plus t’aider. :/
Essaye d’afficher des trucs dans la console du navigateur avec console.log pour avoir plus d’information.

Si tu veux qu’on puisse t’aider. À chaque fois, mets entièrement ton dernier code. Il faudrait qu’on puisse avoir un code qui reproduise le problème; sans utiliser Wordpress ça serait l’idéal, juste une page HTML.

Pourquoi rien de s’affiche dans le champ total ? Car la variables ne contient rien ? Car sommesRes est à NaN ? Car document.getElementById("total") ne retourne pas le champs total ? Aide nous à t’aider.