Automatisation d'un code javascript

Résolu/Fermé
Signaler
Messages postés
237
Date d'inscription
samedi 19 juillet 2008
Statut
Membre
Dernière intervention
28 mai 2016
-
Messages postés
237
Date d'inscription
samedi 19 juillet 2008
Statut
Membre
Dernière intervention
28 mai 2016
-
Bonjour tout le monde,
J'ai un script en javascript qui marche à l'heure actuelle.
Le problème est qu'il n'évolue pas par rapport aux données.


var total_commande = document.getElementById('total_commande');
var resultat = parseFloat(document.getElementById('input_tot_1').value) +
parseFloat(document.getElementById('input_tot_2').value) +
parseFloat(document.getElementById('input_tot_3').value) +
parseFloat(document.getElementById('input_tot_4').value) +
parseFloat(document.getElementById('input_tot_5').value) +
parseFloat(document.getElementById('input_tot_6').value) +
parseFloat(document.getElementById('input_tot_7').value) +
parseFloat(document.getElementById('input_tot_8').value) +
parseFloat(document.getElementById('input_tot_9').value) +
parseFloat(document.getElementById('input_tot_10').value) +
parseFloat(document.getElementById('input_tot_11').value) +
parseFloat(document.getElementById('input_tot_12').value);
total_commande.value = parseFloat(Math.round(resultat * 100) / 100).toFixed(2) + "€";
}

Les "input_tot_*" sont générés d'après le nombre de données de ma base de données.
1 input par élément.
(généré en php dans un while sous la forme id="input_tot_<?php echo $i;?>" ou $i=1 et s'incrémente tant qu'il y a des éléments de la base de données.

Je veux l'addition de tous les "input_tot_" et l'inscrire dans un input unique nommé "total_commande"

A l'heure actuelle j'arrive à faire le code manuellement, mais si je rajoute plus d'élément à ma base de données alors je devrais modifié mon script manuellement.

Est il possible de faire une boucle sur le code ci-dessus svp ? et surtout comment ?

Merci pour toute aide


4 réponses

Messages postés
34172
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
28 novembre 2021
3 849
Bonjour,

Le plus simple est d'utiliser une class "fictive".
et d'utiliser cette classe pour avoir la liste de tous les INPUT à utiliser pour ton calcul.

dans ton php:
echo " <input type='text' id='input_tot_".$i."' class='aclaculer' ...  ";


Puis dans le Javascript un truc du genre :
//récupère TOUS les éléments dont la class est : aclaculer
var elements = document.getElementsByClassName('aclaculer');

 var resultat = 0;
//boucle sur les elements
elements.forEach(function(elm) {
   resultat +=  parseFloat(elm.value);
});


Cordialement, 
Jordane                                                                 
Messages postés
237
Date d'inscription
samedi 19 juillet 2008
Statut
Membre
Dernière intervention
28 mai 2016
4
Merci pour votre réponse Jordane
Je vais essayer votre méthode.

Par contre je ne sais pas à quoi correspond elm dans function(elm).
Je dois le remplacer par quelque chose ? ou le declarer ?
Pourriez vous m'expliquer svp ? (novice en javascript et php)

merci beaucoup
Messages postés
34172
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
28 novembre 2021
3 849
Il n'y a rien à modifier dans le code js.

le foreach permet de boucler sur chaque item de l'array "elements".
Pour chaque item (elm).. on fait le code qui se trouve dans la function.

(*) elm = abréviation pour le mot élement.
Messages postés
237
Date d'inscription
samedi 19 juillet 2008
Statut
Membre
Dernière intervention
28 mai 2016
4
Merci je vais tester cela de suite
Messages postés
237
Date d'inscription
samedi 19 juillet 2008
Statut
Membre
Dernière intervention
28 mai 2016
4

function acalculer(){
//récupère TOUS les éléments dont la class est : acalculer
var elements = document.getElementsByClassName('acalculer');

var resultat = 0;
//boucle sur les elements
elements.forEach(function(elm) {
resultat += parseFloat(elm.value);
});
}


J'ai bien mis la class="acalculer" dans les "input_tot_<?php echo $i;?"

Cependant j'ai une erreur dans la console qui m'indique :
elements.forEach is not a function

Ai je une erreur dans ce code svp ?
Merci
Messages postés
34172
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
28 novembre 2021
3 849
Oups au temps pour moi...
j'ai tellement l'habitude de bosser en jquery que j'oublie parfois certains morceaux pour le 'pur' javascript et ou ne sont pas fonctionnels pour certains navigateurs...


Ajoute ce code la en plus dans ta page (issue de : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach :
if (!Array.prototype.forEach) {

  Array.prototype.forEach = function(callback, thisArg) {

    var T, k;

    if (this == null) {
      throw new TypeError(' this vaut null ou n est pas défini');
    }

    // 1. Soit O le résultat de l'appel à ToObject
    //    auquel on a passé |this| en argument.
    var O = Object(this);

    // 2. Soit lenValue le résultat de l'appel de la méthode 
    //    interne Get sur O avec l'argument "length".
    // 3. Soit len la valeur ToUint32(lenValue).
    var len = O.length >>> 0;

    // 4. Si IsCallable(callback) est false, on lève une TypeError.
    // Voir : http://es5.github.com/#x9.11
    if (typeof callback !== "function") {
      throw new TypeError(callback + ' n est pas une fonction');
    }

    // 5. Si thisArg a été fourni, soit T ce thisArg ;
    //    sinon soit T égal à undefined.
    if (arguments.length > 1) {
      T = thisArg;
    }

    // 6. Soit k égal à 0
    k = 0;

    // 7. On répète tant que k < len
    while (k < len) {

      var kValue;

      // a. Soit Pk égal ToString(k).
      //   (implicite pour l'opérande gauche de in)
      // b. Soit kPresent le résultat de l'appel de la 
      //    méthode interne HasProperty de O avec l'argument Pk.
      //    Cette étape peut être combinée avec c
      // c. Si kPresent vaut true, alors
      if (k in O) {

        // i. Soit kValue le résultat de l'appel de la 
        //    méthode interne Get de O avec l'argument Pk.
        kValue = O[k];

        // ii. On appelle la méthode interne Call de callback 
        //     avec T comme valeur this et la liste des arguments
        //     qui contient kValue, k, et O.
        callback.call(T, kValue, k, O);
      }
      // d. On augmente k de 1.
      k++;
    }
    // 8. on renvoie undefined
  };
}



et puis si ça ne marche toujours pas, il est toujours possible de passer par une boucle "traditionnelle"
du genre :
var nbElm =  elements.length;
for (var i=0 ; i<=nbElm;i++){
 resultat +=  parseFloat(elements[i].value);
}

(finalement la vielle méthode est sûrement la plus simple... :-) )
Messages postés
237
Date d'inscription
samedi 19 juillet 2008
Statut
Membre
Dernière intervention
28 mai 2016
4
Ah je viens de voir le debut de code et je vois des arrays.
Mon code n'en contient pas
J'ai fais mon tableau en bouclant sur les <tr> et <td>
Je ne sais pas du coup si cela marchera. (je suis débutant php aussi et j'arrête pas de remanier mon code à mesure que j'apprends un peu plus)

Je vais me tourner vers la 'vieille méthode' pour essayer ^^

Merci
Messages postés
237
Date d'inscription
samedi 19 juillet 2008
Statut
Membre
Dernière intervention
28 mai 2016
4
Je pense qu'avec mes maigres connaissances de javascript je fais n'importe quoi avec votre code
J'en suis à ce niveau


<script type="text/javascript">
function acalculer(){
var resultat = document.getElementById('total_commande');
var elements = document.getElementsByClassName('acalculer');
var nbElm = elements.length;
for (var i=0 ; i<=nbElm;i++){
resultat += parseFloat(elements[i].value);
}
document.getElementById('total_commande').value = resultat;
}
</script>


Avec une erreur console sur le value de :

resultat += parseFloat(elements[i].value);
Messages postés
34172
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
28 novembre 2021
3 849
function calculer(){
  var elements = document.getElementsByClassName('acalculer');
  var resultat = 0;
  var nbElm =  elements.length;
  for (var i=0 ; i<nbElm;i++){
     resultat +=  parseFloat(elements[i].value);
  }

 //et ici tu peux mettre le résultat dans ton champ input
var total_commande = document.getElementById('total_commande'); 
    total_commande.value = resultat;
}
Messages postés
237
Date d'inscription
samedi 19 juillet 2008
Statut
Membre
Dernière intervention
28 mai 2016
4
Ah cela marche à merveille !

Merci beaucoup Jordane
Messages postés
34172
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
28 novembre 2021
3 849
Pour info, c'était le <= (petite erreur de ma part) qui posait problème dans ma boucle
 for (var i=0 ; i<=nbElm;i++){

que j'ai donc remplacé par :
 for (var i=0 ; i<=nbElm;i++){
Messages postés
237
Date d'inscription
samedi 19 juillet 2008
Statut
Membre
Dernière intervention
28 mai 2016
4
Merci pour la précision :)