Automatisation d'un code javascript

Résolu/Fermé
ced3c Messages postés 237 Date d'inscription samedi 19 juillet 2008 Statut Membre Dernière intervention 28 mai 2016 - 28 mai 2016 à 14:01
ced3c Messages postés 237 Date d'inscription samedi 19 juillet 2008 Statut Membre Dernière intervention 28 mai 2016 - 28 mai 2016 à 18:34
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


A voir également:

4 réponses

jordane45 Messages postés 38454 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 12 mars 2025 4 741
Modifié par jordane45 le 28/05/2016 à 15:39
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                                                                 
0
ced3c Messages postés 237 Date d'inscription samedi 19 juillet 2008 Statut Membre Dernière intervention 28 mai 2016 5
28 mai 2016 à 15:31
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
0
jordane45 Messages postés 38454 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 12 mars 2025 4 741
28 mai 2016 à 15:35
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.
0
ced3c Messages postés 237 Date d'inscription samedi 19 juillet 2008 Statut Membre Dernière intervention 28 mai 2016 5
28 mai 2016 à 15:37
Merci je vais tester cela de suite
0
ced3c Messages postés 237 Date d'inscription samedi 19 juillet 2008 Statut Membre Dernière intervention 28 mai 2016 5
28 mai 2016 à 15:49

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
0
jordane45 Messages postés 38454 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 12 mars 2025 4 741
28 mai 2016 à 15:56
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... :-) )
0
ced3c Messages postés 237 Date d'inscription samedi 19 juillet 2008 Statut Membre Dernière intervention 28 mai 2016 5
28 mai 2016 à 16:06
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
0
ced3c Messages postés 237 Date d'inscription samedi 19 juillet 2008 Statut Membre Dernière intervention 28 mai 2016 5
28 mai 2016 à 16:14
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);
0
jordane45 Messages postés 38454 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 12 mars 2025 4 741
28 mai 2016 à 18:03
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;
}
0
ced3c Messages postés 237 Date d'inscription samedi 19 juillet 2008 Statut Membre Dernière intervention 28 mai 2016 5
28 mai 2016 à 18:09
Ah cela marche à merveille !

Merci beaucoup Jordane
0
jordane45 Messages postés 38454 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 12 mars 2025 4 741
28 mai 2016 à 18:13
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++){
0
ced3c Messages postés 237 Date d'inscription samedi 19 juillet 2008 Statut Membre Dernière intervention 28 mai 2016 5
28 mai 2016 à 18:34
Merci pour la précision :)
0