Partage
  • Partager sur Facebook
  • Partager sur Twitter

addition dans boucle

additionner dans une boucle

Sujet résolu
    21 juillet 2021 à 13:33:11

    bonjour

    je n'arrive pas a additionner et afficher le résultat...je ne sais pas si c'est comme ça pour ajouter les valeurs:

    j'ai comme erreur   calcul is not defined.... normal car il prend la dernière valeur, je ne vois pas comment faire.

    	$maxg = 50;//limite 50 gagnant
    	for($i=0; $i < $maxg; $i++){
    		$nomplace = $i + 1;
    		?>
    	<div  id="voirplace<?php echo $i; ?>" style="display:none;">	
    	Gains pour la place <?php echo $nomplace; ?> :<input aonchange="calcul()" id="quantity<?php echo $i; ?>"  name="gainsp<?php echo $i; ?>" type="number" pattern="^[0-9]+$"  value="<?php if (isset($_POST['gainsp'.$i])) { echo $_POST['gainsp'.$i]; } ?>" />
    	<span id="rest_profits<?php echo $i; ?>">0</span> Code(s)
    	<br><br>
    	</div>
    	<?php
    	}
      function calcul()
      {
    	
    	actual_profits = document.getElementById("actual_profits").innerHTML;
    	  let count = 50;
         for (let i=0 ; i < count; i++) {
    		quantity +i = document.getElementById("quantity" +i).value;
    		quantity +i = parseInt(quantity +i)
    		
    		totalqut +=  quantity +i;
    	rest_profits = actual_profits - totalqut;
    	document.getElementById("total_price" +i).innerHTML = totalqut;
    	document.getElementById("rest_profits" +i).innerHTML = rest_profits;
    } 
    	
      }
    -->
    </script>



    • Partager sur Facebook
    • Partager sur Twitter
      21 juillet 2021 à 16:53:36

      Alors il y a plusieurs choses que je vois qui ne vont pas.

      Ton input a un attribut "aonchange", probablement une erreur de frappe?
      Normalement, pour déclencher une fonction avec un attribut évènement ( comme "onclick" ou "onchange" ), ça devrait plutôt être :

      onchange="javascript:calcul();"

      Ensuite, les variables actual_profits, quantity, totalqut et rest_profits, elles sont bien déclarée quelque part avant que tu ne les utilise?
      lignes 7 et 8, quantity +i =... là je crois savoir ce que tu veux faire, à savoir créer un nom de variable de manière dynamique, et je suis pas sûr que ça marche. Fais un console.log() de quantity0 puis de quantity1 voir si ça marche, mais je pense que non.
      Tu devrais plutôt utiliser un array, et faire quantity[i].

      • Partager sur Facebook
      • Partager sur Twitter
        21 juillet 2021 à 17:33:53

        Bonjour, dans ton navigateur tu peut faire un click droit inspecté éléments onglet console pour voir les "éventuels" erreurs loggé par javascript.

        Normalement ce morceau de code devrait a minima renvoyé un message:

        SyntaxError: Invalid left-hand side in assignment

        A cause de ces 2 ligne là:

        quantity + i = document.getElementById("quantity" +i).value;
        quantity + i = parseInt(quantity +i);

        Même si quantity et une variable définit ailleurs dans le code Javascript et quelle contient bien un nombre l'expression de gauche de l'instruction:

        quantity + i

        produit un nombre et n'est plus une variable.

        Par exemple si quantity vaut 1 et i vaut 1 cela revient à écrire

        2 = document.getElementById("...");

        Tu ne peut pas changé "la valeur des valeurs" en javascript (et dans la quasi totalité des langages de programmation).

        Je ne saurais pas trop te proposé de solution alternative car je n'est pas vraiment compris ce que tu essaies de faire.

        La seule idée que j'ai pour que le code s'exécute c'est de eval en brute la valeur de gauche:

        eval(`quantity${i}`) = document.getElementById("quantity" +i).value;
        eval(`quantity${i}`) = parseInt(quantity +i);

        Cela "règle le problème" parce que la fonction eval évalue la chaîne de caractère en tant que code javascript c'est ce qui permet de créé une nom de variable dynamique, dans la pratique cette fonction n'est pas censé être utilisé

        Mais en tous cas il faut que tu règle l'erreur de syntaxe pour que le code s'exécute, erreur qui dans la plus part des éditeurs devrait être surligné en rouge vif d'ailleurs.




        • Partager sur Facebook
        • Partager sur Twitter

        suggestion de présentation.

          21 juillet 2021 à 19:08:20

          pour le 'onchange', 'onclick' j'ai ajouté "a" sinon openclassrooms bloque la page.... je ne sais pas si ça vient de mon navigateur en tout cas c'est super énervant.

          j'ai mis

          	eval(`quantity${i}`) = document.getElementById("quantity" +i).value;
          	eval(`quantity${i}`) = parseInt(quantity +i);
          		
          		totalqut +=  eval(`quantity${i}`);

          dans la console j'ai

          Uncaught ReferenceError: cannot assign to function call

          calcul http://localhost/create_concours:570
          onchange http://localhost/create_concours:1
          souligné
          eval(`quantity${i}`) = document.getElementById("quantity" +i).value;

          variable déclaré et le

          Vous pouvez distribué <span id="actual_profits"><?php echo $profits['Code'] ?></span> Code(s) 
          

          la variable  quantity et a coté du 'onchange' voir plus haut... totalqut et rest_profits défini dans la fonction.

          pour le array je ne vois pas comment faire

          var quantity = [];
          

          mais pour récupérer la valeur de

          document.getElementById("quantity" +i).value;

          c'est pas

          quantity[i]= document.getElementById("quantity" +i).value;

          et ensuite comment calculer le total

          ce que je veut faire :

          utilisateur choisi le nombre de gagnant limité a 50

          par exemple: il choisit 5

          ça affiche affiche les 5 premier et cache les 45 suivant

          $maxg = 50;//limite 50 gagnant
          for($i=0; $i < $maxg; $i++){
              $nomplace = $i + 1;
              ?>
          <div  id="voirplace<?php echo $i; ?>" style="display:none;">   
          Gains pour la place <?php echo $nomplace; ?> :<input aonchange="calcul()" id="quantity<?php echo $i; ?>"  name="gainsp<?php echo $i; ?>" type="number" pattern="^[0-9]+$"  value="<?php if (isset($_POST['gainsp'.$i])) { echo $_POST['gainsp'.$i]; } ?>" />
          <span id="rest_profits<?php echo $i; ?>">0</span> Code(s)
          <br><br>
          </div>
          <?php
          }


          utilisateur à dans son stock ex: 50 codes et qui entre comme valeur pour le 1er input: 10

          je voudrais qu'il affiche pour le 2eme input "code restant 40" et il ne pourra pas dépasser cette valeur...si il entre 5:

          le 3eme input = "code restant 35" etc...

          par contre si il modifie le 1er tous recalculé

          j'avais pensé ça pour ne pas dépasser la valeur mais ne sais pas comment remplacer le 10 par la valeur restante id="rest_profits<?php echo $i; ?> 

          aonKeyUp="if(this.value>10){this.value='10';}else if(this.value<0){this.value='0';}"







          • Partager sur Facebook
          • Partager sur Twitter
            21 juillet 2021 à 23:57:58

            Non ça ne vient pas de ton navigateur ces un problème courant sur ce forum,

             Oui effectivement j'ai fait une erreur dans la syntaxe il n'y à qu'un morceau d'instruction dans la fonction eval ce qui provoque l'erreur car à la fin de l'évaluation le code et invalide:

            l'instruction doit entièrement être à l'intérieur de eval:

            eval(`quantity${i} = document.getElementById("quantity" +i).value`);

            Et pareil pour les autres instructions, à noté que ce n'est toujours pas une solution recommandable d'utilisé la fonction eval.


            Mais comme tu n'utilise pas quantity en dehors de la boucle est-ce que tu ne peut pas juste retiré les  + i que tu as mit devant la définition de quantity et écrire le comme de cette façon:

              function calcul()
              {
                 
                actual_profits = document.getElementById("actual_profits").innerHTML;
                let count = 50;
                
                for (let i=0 ; i < count; i++) {
                    quantity = document.getElementById("quantity" +i).value;
                    quantity = parseInt(document.getElementById("quantity" +i).value+i)
                     
                    totalqut +=  quantity + i;
                	
                    rest_profits = actual_profits - totalqut;
                	
                    document.getElementById("total_price" +i).innerHTML = totalqut;
                	document.getElementById("rest_profits" +i).innerHTML = rest_profits;
            	}
                 
              }

            Je ne c'est pas si d'un point de vue logique ce code et fonctionnel cela dépend du résultat que tu attendait mais le code ne devrait plus produire d'erreur.

             Après cette soustraction et un peut douteuse:

            rest_profits = actual_profits - totalqut;

            comme actual_profits et une chaîne de texte qui provient d'un innerHTML

            actual_profits = document.getElementById("actual_profits").innerHTML;

            si javascript arrive pas à parsé automatiquement la valeur en nombre (si ce n'est pas un nombre par exemple) tu te retrouveras avec la constante NaN

            qui se propageras dans le reste des opérations (donc potentiellement sur l'affichage) pour les quel tu utiliseras la variable rest_profits qui enregistre  le résultat de la soustraction.

            • Partager sur Facebook
            • Partager sur Twitter

            suggestion de présentation.

              22 juillet 2021 à 7:39:30

              Alors, pour l'utilisation du array, ce que je suggérais c'est tout d'abord de créer un array quantity :

              quantity = [];

              Ensuite, d'y ajouter au fur et à mesure des index, de 0 à 50 :

              quantity[i] = document.getElementById("quantity" + i).value;

              Ensuite, il y a une petite astuce pour que javascript convertisse automatiquement une chaîne de caractère ne contenant que des caractères numériques en nombre, il suffit de soustraire zéro :

              quantity[i] = document.getElementById("quantity" + i).value - 0;

              Cette conversion doit pouvoir marcher avec actual_profits, si toutefois le "innerHTML" ne contient pas de caractère non numérique, genre une balise html. Sinon il faut faire un "découpage" de la chaîne récupérée.
              Bien sûr, mieux vaut s'assurer avant de poursuivre le script de gérer l'erreur si l'utilisateur entre des caractères non numériques dans l'input :

              if(isNaN(document.getElementById("quantity" + i).value - 0))
              {
                 //renvoyer un message d'erreur et arrêter la fonction
              }
              else
              {
                 //poursuivre normalement la fonction
              }



              • Partager sur Facebook
              • Partager sur Twitter
                22 juillet 2021 à 11:36:50

                samuel, en prenant le script qui retire les i, j'ai comme erreur totalqut is not defined

                j'ai fait comme ça et plus erreur:

                  actual_profits = document.getElementById("actual_profits").innerHTML;
                  let count = 50;
                  var quantity = 0; 
                  for (let i=0 ; i < count; i++) {
                	  if (document.getElementById("quantity"+i).value != "") { 
                	  quantity = quantity + parseInt(document.getElementById("quantity" +i).value)
                	  
                	  }
                	  
                  }
                       
                      rest_profits = actual_profits - quantity;
                       
                      document.getElementById("total_price").innerHTML = quantity;
                      document.getElementById("rest_profits").innerHTML = rest_profits;
                for (let i=0 ; i < count; i++) {
                document.getElementById("rest_profits" +i).innerHTML = rest_profits;

                } }

                je voudrais limiter la valeur a ne pas dépasser dans le input par rest_profits.

                je ne sais pas comment remplacer le 10 par la valeur de rest_profits comment faire ?

                 aonKeyUp="if(this.value>10){this.value='10';}else if(this.value<0){this.value='0';}"



                LucasWerquin comment récupérer le total des valeur du tableau ?

                   quantity = [];
                  for (let i=0 ; i < count; i++) {
                	  if(isNaN(document.getElementById("quantity" + i).value - 0))
                {
                   quantity[i] = 0;
                }
                else
                {
                   quantity[i] = document.getElementById("quantity" + i).value - 0;
                }



                • Partager sur Facebook
                • Partager sur Twitter
                  22 juillet 2021 à 15:48:00

                  Je ne pense pas que tu auras accès à la valeur de cet façon mais tu peut peut-être vérifié la valeur pendant la boucle de la fonction calcul

                  for (let i=0 ; i < count; i++) {
                  	
                      if (document.getElementById("quantity"+i).value != "") {
                      
                      	let value = parseInt(document.getElementById("quantity" +i).value);
                      
                      	// clamp la valeur entre 0 et 10
                      	if(value > 10) value = 10;
                          else if(value < 0) value = 0;
                      
                      	quantity +=  value;
                       
                      }
                       
                  }



                  • Partager sur Facebook
                  • Partager sur Twitter

                  suggestion de présentation.

                    22 juillet 2021 à 16:12:39

                    Alors, soit tu collecte les valeurs de chaque input "quantity" + i dans un tableau, ce qui est utile si tu veux conserver en mémoire chaque valeur, mais si tu cherches uniquement à faire le total de tous les inputs, tu peux te contenter de ce que tu as déjà fait :

                    actual_profits = document.getElementById("actual_profits").innerHTML;
                    let count = 50;
                    var quantity = 0;
                    for (let i=0 ; i < count; i++) {
                        if (document.getElementById("quantity"+i).value != "") {
                        quantity = quantity + parseInt(document.getElementById("quantity" +i).value)
                         
                        }
                         
                    }
                          
                        rest_profits = actual_profits - quantity;
                          
                        document.getElementById("total_price").innerHTML = quantity;
                        document.getElementById("rest_profits").innerHTML = rest_profits;<br>  for (let i=0 ; i < count; i++) {<br>    document.getElementById("rest_profits" +i).innerHTML = rest_profits;<br><br>  }
                    }

                    pour ce qui est de remplacer 10 par rest_profits, ceci devrait fonctionner, non ?

                    aonKeyUp="jovascript:if(this.value>rest_profits){this.value=rest_profits;}else if(this.value<0){this.value='0';}"

                    ( j'ai mis jovascript parce que sinon on dirait que ça me bloque )
                    Mais tout dépend de ce que tu veux vraiment, si la valeur mise dans l'input ne doit pas dépasser 10 NI rest_profits, il faut complexifier un poil la chose :

                    - Premièrement si this.value<0 mettre 0
                    - Deuxièmement si this.value>10 mettre 10
                    - Et enfin si this.value>rest_profits mettre rest_profits.

                    Donc au final si rest_profits vaut 8 et que l'utilisateur met 11, le premier test ne fait rien, le deuxième test met la valeur à 10, et enfin le troisième met 8.

                    [EDIT]

                    Je viens de relire ton premier post et soit je n'avais pas fait attention la première fois, soit tu l'as éditer entre temps. Donc, pour préremplir les inputs restant, il faudrait que tu laisse tomber l'attribut "onchange", et que tu crée des eventListeners. D'une part ça fait plus "propre" et surtout ce sera plus lisible, parce que les fonctions vont être plus complexes.

                    Je te laisse chercher un peu, mais ça devrait ressembler à ça :

                    function calculer_rest_profits()
                    {
                       // Premièrement calculer le rest_profits
                    
                       // deuxièmement récupérer la liste des inputs non remplis par l'utilisateurs, il contiendront donc des caractères non numériques
                       var inputList = [];   
                       for(i=1;i<51;i++) //si tu as bien 50 inputs de quantity1 à quantity50
                       {
                          if(isNaN(document.getElementById("quantity" + i)))
                          inputList[inputList.length] = document.getElementById("quantity" + i);
                       } //ici tu te retrouveras avec un array contenant les inputs non remplis, ou remplis avec des valeurs non numériques donc non valides
                       for(i=0;i<inputList.length;i++)
                       {
                          inputList[i].value = "max " + rest_profits;
                       } // avec ça tu vas préremplir TOUS les inputs non remplis par l'utilisateur ou remplis avec des valeurs non numériques
                    }
                    
                    // et enfin, ajouter un eventListener aux inputs, disons, à chaque fois que la valeur de l'input change
                    for(i=1;i<51;i++)
                    {
                       document.getElementById("quantity" + i).addEventListener("change", calculer_rest_profits);
                    } //c'est comme de mettre un attribut "aonChange", mais tu peux mettre une fonction hyper complexe, c'est quand même plus pratique que de la mettre sur une seule ligne dans ton code HTML

                    Voilà, alors bien sûr tu peux toujours peaufiner un peu si tu veux que seul le premier input vide soit prérempli, si tu veux que la fonction ne soit déclenchée que quand l'utilisateur a fini de remplir un input ( et donc passe à un autre input, ou clique ailleurs dans le document ) avec l'évènement "focusout"...

                    -
                    Edité par LucasWerquin 22 juillet 2021 à 16:56:56

                    • Partager sur Facebook
                    • Partager sur Twitter
                      22 juillet 2021 à 16:59:45

                      Pas de quoi.
                      Mais j'ai fait un edit pendant que tu marquais le sujet comme résolu, j'ai peut-être mis des choses qui pourraient t'aider.
                      • Partager sur Facebook
                      • Partager sur Twitter
                        26 juillet 2021 à 11:26:31

                        en faisant un test sur onkeyup

                        si j'entre à la toute 1er fois un très gros chiffre ça l'indique...j'ai ajouté actual_profits qui  est la somme dans le compte du membre a ne pas dépasser mais ça ne fonctionne pas...en remplaçant  actual_profits par un chiffre ça fonctionne.

                        j'ai pas erreur... comment voir la valeur de actual_profits ?

                        je voudrais aussi empêcher de mettre des zéro avant un chiffre 000001

                        quelqu'un a une idée ?

                        aonKeyUp="if(this.value>rest_profits){this.value='rest_profits';}else if(this.value>actual_profits){this.value='';}else if(this.value<0){this.value='0';}"



                        • Partager sur Facebook
                        • Partager sur Twitter
                          26 juillet 2021 à 12:52:27

                          Je ne comprend pas très bien la question.
                          Essaye de faire des conole.log dans ton onKeyUp ( ce qui va le rendre plutôt volumineux, d'où l'intérêt d'utiliser des enventListener ) pour voir si tu récupère bien les valeurs dont tu as besoin, actual_profits n'est peut-être pas défini au bon endroit, par exemple ( attention aux variables locales / globales ).

                          Pour ce qui est des zéros avant un nombre, la conversion effectuée en soustrayant zéro devrait s'en charger, non?

                          • Partager sur Facebook
                          • Partager sur Twitter
                            26 juillet 2021 à 14:36:37

                            j'avais essayé avec evenlistener mais ça ne fonctionne pas

                            function calculer_rest_profits()
                            {
                            	// Premièrement calculer le rest_profits
                            	  actual_profits = document.getElementById("actual_profits").innerHTML;
                              let count = 50;
                              var quantity = 0; 
                              var ajouts = '';
                              for (let i=0 ; i < count; i++) {
                            	  if (document.getElementById("quantity"+i).value != "") { 
                            	  quantity = quantity + parseInt(document.getElementById("quantity" +i).value);
                            		  }
                              }
                                   
                                  rest_profits = parseInt(actual_profits - quantity);
                               
                             
                               // deuxièmement récupérer la liste des inputs non remplis par l'utilisateurs, il contiendront donc des caractères non numériques
                               var inputList = [];  
                               for(i=1;i<51;i++) //si tu as bien 50 inputs de quantity1 à quantity50
                               {
                                  if(isNaN(document.getElementById("quantity" + i)))
                                  inputList[inputList.length] = document.getElementById("quantity" + i);
                               } //ici tu te retrouveras avec un array contenant les inputs non remplis, ou remplis avec des valeurs non numériques donc non valides
                               for(i=0;i<inputList.length;i++)
                               {
                                  inputList[i].value = "max " + rest_profits;
                               } // avec ça tu vas préremplir TOUS les inputs non remplis par l'utilisateur ou remplis avec des valeurs non numériques
                            }
                             
                            // et enfin, ajouter un eventListener aux inputs, disons, à chaque fois que la valeur de l'input change
                            for(i=1;i<51;i++)
                            {
                               document.getElementById("quantity" + i).addEventListener("change", calculer_rest_profits);
                            } //c'est comme de mettre un attribut "aonChange", mais tu peux mettre une fonction hyper complexe, c'est quand même plus pratique que de la mettre sur une seule ligne dans ton code HTML
                            	



                            la première valeur ça entre bien mais les suivantes ça refuse. après ça n'affiche pas le restant.

                            donc j'ai fait comme ça:

                            <div  id="modcode" style="display:none;">	
                            	TutoCodes
                            	<br>
                            	Vous pouvez distribué <span id="actual_profits"><?php echo $profits['TutoCode'] ?></span> TutoCode<?php if ($profits['TutoCode'] > 1) { echo "s"; } ?>
                            	Il vous en restera <span id="rest_profits"><?php echo $profits['TutoCode'] ?></span> 
                            	Pour un Total utilisé de <span id="total_price">0</span> TutoCode(s)
                            <br>
                            	<?php 
                            	$maxg = 50;//limite 50 gagnant
                            	for($i=0; $i < $maxg; $i++){
                            		$nomplace = $i + 1;
                            		?>
                            	<div  id="voirplace<?php echo $i; ?>" style="display:none;">	
                            	Gains pour la place <?php echo $nomplace; ?> :<input aonchange="calcul()" id="quantity<?php echo $i; ?>"  name="gainsp<?php echo $i; ?>" style="width: 30%" maxlength="8" min="1" max="99999999" type="number" pattern="^[0-9]+$"  aonKeyUp="ajavascript:if(this.value>rest_profits){this.value='rest_profits';}else if(this.value>actual_profits){this.value='';}else if(this.value<0){this.value='0';}" value="<?php if (isset($_POST['gainsp'.$i])) { echo $_POST['gainsp'.$i]; } ?>" />
                            	<span id="rest_profits<?php echo $i; ?>"></span> 
                            		<br><br>
                            	</div>
                            	<?php
                            	}
                            	?>
                            	</div>
                            function calcul()
                            {
                              actual_profits = document.getElementById("actual_profits").innerHTML;
                              let count = 50;
                              var quantity = 0; 
                              var ajouts = '';
                              for (let i=0 ; i < count; i++) {
                            	  if (document.getElementById("quantity"+i).value != "") { 
                            	  quantity = quantity + parseInt(document.getElementById("quantity" +i).value);
                            		  }
                              }
                                   
                                  rest_profits = parseInt(actual_profits - quantity);
                            	  if (rest_profits < 0){
                            		  rest_profits = 0;
                            	  }
                            
                                   
                                  document.getElementById("total_price").innerHTML = quantity;
                                  document.getElementById("rest_profits").innerHTML = rest_profits;
                            	  
                            	   for (let i=0 ; i < count; i++) {
                            	 if (document.getElementById("quantity"+i).value != "") { 
                            	  document.getElementById("rest_profits" +i).innerHTML = "";
                            		  }	else {  
                            			if (rest_profits > 1) {
                            	ajouts = 's';
                            	}
                            	document.getElementById("rest_profits" +i).innerHTML = " Il reste " + rest_profits + " Code" + ajouts;
                            		}
                              }
                            }

                            le problème c'est quand tu entre la 1er valeur, tu peut dépasser la limite actual_profits... je ne vois pas pourquoi, on dirais qui ne prend pas la valeur et un autre pb si tu clique les 2 flèche haut et bas du type number pour changer la valeur et dépasse le rest_profits = ça ne bloque plus.

                            j'ai essayer avec du type text et tel : ça bloque mais affiche rest_profits, c'est pas jojo

                            pour le console.log je ne vois pas comment ça fonctionne, si tu peut me donner un exemple .

                            et soustraire par zéro = je l'ai fait sur rest_profits, mais ça ne fait rien....a mon avis ça doit etre avec onkeyup, je cherche...  

                            • Partager sur Facebook
                            • Partager sur Twitter
                              26 juillet 2021 à 15:57:36

                              Alors, le console.log affiche un message dans la console de développement ( clique gauche sur la page, "inspecter" ).
                              Alternative très pratique aux fameuses "alertes".

                              Par exemple, dans ta fonction calcul(), après la ligne 4, tu peux insérer ceci :

                              console.log("count = " + count");

                              dans ta console, tu devrais avoir le message suivant : count = 50.
                              Mieux, tu peux, une fois ta page chargée et tes scripts achevés, interroger la console sur la valeur qu'on certaines variables. Il te suffit de cliquer dans la console, au niveau de l'invite de commande ( signe > ) et de taper par exemple console.log(actual_profits);
                              En l'occurrence, ceci devrait te renvoyer "undefined", car la variable actual_profits est déclarée dans le corps de ta fonction calcul(), et est donc une variable locale, accessible uniquement au sein de ta fonction calcul().

                              Ensuite, voici quelques modifs sur le code que je t'ai proposé et que tu as complété :

                              var actual_profits; // déclarée dans l'espace global
                              
                              function calculer_rest_profits()
                              {
                                 console.log("l'eventListener a bien été déclenché")    
                              // Premièrement calculer le rest_profits
                                    actual_profits = document.getElementById("actual_profits").innerHTML - 0;
                                let count = 50;
                                var quantity = 0;
                                var ajouts = '';
                                for (let i=0 ; i < count; i++) {
                                    if (document.getElementById("quantity"+i).value != "") {
                                    quantity = quantity + parseInt(document.getElementById("quantity" +i).value);
                                        }
                                }
                                      
                                    rest_profits = parseInt(actual_profits - quantity);
                                  
                                
                                 // deuxièmement récupérer la liste des inputs non remplis par l'utilisateurs, il contiendront donc des caractères non numériques
                                 var inputList = []; 
                                 for(i=1;i<51;i++) //si tu as bien 50 inputs de quantity1 à quantity50
                                 {
                                    if(isNaN(document.getElementById("quantity" + i)))
                                    inputList[inputList.length] = document.getElementById("quantity" + i);
                                 } //ici tu te retrouveras avec un array contenant les inputs non remplis, ou remplis avec des valeurs non numériques donc non valides
                                 for(i=0;i<inputList.length;i++)
                                 {
                                    inputList[i].value = "max " + rest_profits;
                                 } // avec ça tu vas préremplir TOUS les inputs non remplis par l'utilisateur ou remplis avec des valeurs non numériques
                              }
                                
                              // et enfin, ajouter un eventListener aux inputs, disons, à chaque fois que la valeur de l'input change
                              for(i=1;i<51;i++)
                              {
                                 document.getElementById("quantity" + i).addEventListener("change", calculer_rest_profits);
                              } //c'est comme de mettre un attribut "aonChange", mais tu peux mettre une fonction hyper complexe, c'est quand même plus pratique que de la mettre sur une seule ligne dans ton code HTML

                              Première chose, enlève les attributs onchange et onkeyup de tes inputs, et vérifie qu'en entrant une valeur dans un  input le console.log te renvoie quelque chose.
                              Si ça ne va pas j'essayerais de te pondre un petit code plus complet.

                              -
                              Edité par LucasWerquin 26 juillet 2021 à 16:29:43

                              • Partager sur Facebook
                              • Partager sur Twitter
                                26 juillet 2021 à 17:09:27

                                je peut entrer que le 1er input, le reste je peut rien entrer comme valeur.

                                la console : il me renvoi

                                l'eventListener a bien été déclenché

                                console.log(quantity1)
                                <input id="quantity1" name="gainsp1" style="width: 30%" maxlength="8" min="1" max="99999999" type="number" pattern="^[0-9]+$" value="">
                                undefined
                                console.log(quantity0)
                                <input id="quantity0" name="gainsp0" style="width: 30%" maxlength="8" min="1" max="99999999" type="number" pattern="^[0-9]+$" value="">

                                -
                                Edité par maxtrident 26 juillet 2021 à 17:11:47

                                • Partager sur Facebook
                                • Partager sur Twitter
                                  26 juillet 2021 à 19:40:35

                                  Jai un peu mieux relu ton code, il semble y avoir un manque de cohérence dans les boucles. Moi je suis parti du principe que tu avais des inputs numérotés de 1 à 50, mais dans ton php tu numérote de 0 à 49.

                                  Sinon, voici un petit quelque chose qui peut t'aider à prendre un nouveau départ ( des fois ça s'impose ) :

                                  HTML :

                                  <!DOCTYPE html>
                                  <html>
                                      <head>
                                          <!-- En-tête de la page -->
                                          <meta charset="utf-8" />
                                          <!--<link rel="stylesheet" href="style.css" /> -->
                                          <title>total inputs</title>
                                  
                                      </head>
                                      
                                      <body>
                                          
                                          <header><!-- Placez ici le contenu de l'en-tête de votre page -->
                                  			<h1>total inputs</h1>
                                  		</header>
                                  		
                                          <section>
                                              <div id="total">total : <span id="total_nb">0</span></div>
                                              <div id="reste">reste : <span id="reste_nb">500</span></div>
                                              <div id="container">
                                                  <div>
                                                      <label for="quantity1">quantité 1 </label><input type="number" id="quantity1" class="quantity_inputs">
                                                  </div>
                                                  
                                                  
                                              </div>
                                          </section>
                                          
                                      </body>
                                      <script src="script.js"></script>
                                  </html>

                                  et le js, qui doit être placé dans un fichier "script.js" situé dans le même répertoire que le HTML :

                                  document.getElementById("quantity1").addEventListener("change", () => {calcul(event.target)}); //ajoute l'eventListener sur le premier input, event.target, c'est l'élément qui a déclenché l'évènement
                                  
                                  function calcul(elt)
                                  {
                                      var inputList = document.getElementsByClassName("quantity_inputs"); //array contenant tous les éléments HTML ayant la classe "quantity_inputs"
                                      if(elt.id.substring(8) == inputList.length) //elt.id, c'est l'id de l'élément qui a déclenché la fonction. Le substring extrait le numéro
                                      {
                                          var newInputDiv = document.createElement("div"); //crée une nouvelle div
                                          var newInputLabel = document.createElement("label"); //crée un label pour le nouvel input
                                          newInputLabel.setAttribute("for", "quantity" + (inputList.length+1)); //donne un attribut "for" au label, qui le lie à l'input correspondant
                                          newInputLabel.innerHTML = "quantité " + (inputList.length+1) + " "; //écrit l'intitulé de l'input dans la balise label
                                          var newInput = document.createElement("input"); //crée un nouvel input
                                          newInput.setAttribute("type", "number"); //lui attribue le type nombre
                                          newInput.setAttribute("id", "quantity" + (inputList.length+1)); // lui donne son attribut id
                                          newInput.setAttribute("class", "quantity_inputs"); //lui attribue la classe
                                          newInput.addEventListener("change", () => {calcul(event.target)}); //et enfin l'eventListener
                                          
                                          newInputDiv.appendChild(newInputLabel); //met le label dans la div
                                          newInputDiv.appendChild(newInput) //puis l'input
                                          document.getElementById("container").appendChild(newInputDiv); //et enfin ajoute la div dans le document HTML
                                      }
                                      
                                      var total = 0; // bien déclarer la variable et lui attribuer le type nombre, sinon erreur dans le processus de calcul
                                      var max = 500; // la valeur maximale. pour l'instant je n'ai fait aucun contrôle pour empêcher le total de dépasser cette valeur.
                                      for(i=0; i<inputList.length; i++) //pour chaque input
                                      {
                                          if(!isNaN(inputList[i].value)) // si la valeur est bien numérique
                                          total += inputList[i].value-0; // l'ajouter au total
                                      }
                                      document.getElementById("total_nb").innerHTML = total; // affiche le total dans l'élément "total_nb"
                                      document.getElementById("reste_nb").innerHTML = max-total; // affiche le reste
                                  }



                                  Voilà, il te reste les ajustement à faire pour correspondre à ce que tu cherches, mais tu as ici le fonctionnement des eventListeners, et quelques bases de la manipulation du DOM.

                                  -
                                  Edité par LucasWerquin 27 juillet 2021 à 5:11:42

                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    27 juillet 2021 à 17:47:58

                                    merci, c'est beaucoup mieux comme ça.

                                    parcontre pour limiter la valeur a ne pas dépasser, je ne vois pas comment faire avec ton script.

                                    j'ai fait comme ça mais fonctionne uniquement pour le 1er input (logique)... sauf si j’utilise les flèches du type number pour augmenter la valeur, je peut quand même dépasser la valeur max .pfffff

                                      <div>
                                                        <label for="quantity1">quantité 1 </label><input type="number" id="quantity1" class="quantity_inputs"
                                    					 aonKeyUp="ajavascript:if(this.value>reste_nb){this.value='reste_nb';}else if(this.value><?php echo $profits['TutoCode'] ?>){this.value='';}else if(this.value<0){this.value='0';}">
                                                    </div>

                                    j'ai ajouté name et value pour récupérer les valeurs.... par contre pas sur pour le value

                                    newInput.setAttribute("name", "gainsc" + (inputList.length+1)); // lui donne son attribut id
                                    newInput.setAttribute("value", ""); 



                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                      27 juillet 2021 à 23:14:11

                                      Alors, Alors, pour limiter la valeur d'un input, tu peux ajouter tous les tests que tu veux dans ta fonction calcul. Là rien de bien sorcier, je te laisse quand même un peu de boulot ;)

                                      En ce qui concerne les valeur max d'un input de type nombre, je n'ai jamais testé, mais j'ai vu que tu utilisais un attribut max, ça ne fonctionne pas?

                                      Ton attribut onkeyup, tu peux aussi le remplacer par un eventListener("keyup", () => {}). Rien n'empêche un élément d'avoir plusieurs eventlisteners. Si le this.value ne fonctionne pas, tu peux procéder de la même façon pour accéder au event.target ( et donc à event.target.value ).
                                      Mais l'intérêt d'un onkeyup, je vois pas, vu que si il y a un "keyup", il y a forcément eu un "change", donc fait tous tes traitement dans ta fonction calcul, ce sera bien plus simple.

                                      Pour limiter la valeur à ne pas dépasser, je ne sais pas quoi te dire, je n'ai pas bien saisi comment elle était déterminée. Après, rien n'empêche à ton php de déclarer et affecter une variable dans l'espace global de javascript, ton script côté client pourra donc y accéder. Par exemple, si le traitement php a déterminé que la valeur max de la somme de tous les inputs ne devait pas dépasser 798 :

                                      <body>
                                         <script>
                                            <?php
                                            var max_total_inputs = 798;
                                            ?>
                                         </script>
                                      ...

                                      Dernière chose, pour préremplir ton newInput, c'est newInput.value = ***, tout simplement.



                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                        28 juillet 2021 à 11:07:12

                                        bon comme je galère grave avec le javascript..je t'ai mis le code qui fonctionne pas en espérant que tu comprend.

                                        <?php
                                        $profits['TutoCode'] = 150;
                                        ?>
                                           
                                              <div id="total">total : <span id="total_nb">0</span></div>
                                                    <div id="reste">reste : <span id="reste_nb"><?php echo $profits['TutoCode'] ?></span></div>
                                                    <div id="container">
                                                        <div>
                                                            <label for="quantity1">quantité 1 </label><input type="number" id="quantity1" class="quantity_inputs"
                                        					min="1" max="<?php echo $profits['TutoCode']; ?>" 
                                        					>
                                                        </div>
                                                         
                                                         
                                                    </div>
                                        <script type="text/javascript"> 
                                        document.getElementById("quantity1").addEventListener("change", () => {calcul(event.target)}); //ajoute l'eventListener sur le premier input, event.target, c'est l'élément qui a déclenché l'évènement
                                         
                                        function calcul(elt)
                                        {
                                            var inputList = document.getElementsByClassName("quantity_inputs"); //array contenant tous les éléments HTML ayant la classe "quantity_inputs"
                                            if(elt.id.substring(8) == inputList.length) //elt.id, c'est l'id de l'élément qui a déclenché la fonction. Le substring extrait le numéro
                                            {
                                                var newInputDiv = document.createElement("div"); //crée une nouvelle div
                                                var newInputLabel = document.createElement("label"); //crée un label pour le nouvel input
                                                newInputLabel.setAttribute("for", "quantity" + (inputList.length+1)); //donne un attribut "for" au label, qui le lie à l'input correspondant
                                                newInputLabel.innerHTML = "quantité " + (inputList.length+1) + " "; //écrit l'intitulé de l'input dans la balise label
                                                var newInput = document.createElement("input"); //crée un nouvel input
                                        		newInput.setAttribute("min", "1"); //ajout mini
                                        		newInput.setAttribute("max", "rest_nb"); //ajout max fonctionne uniquement avec les fleches du type number pas quand on entre une valeur
                                        		newInput.setAttribute("name", "gainsc" + (inputList.length+1)); // lui donne son attribut id
                                        		newInput.setAttribute("value", ***); // ça met une erreur
                                                newInput.setAttribute("type", "number"); //lui attribue le type nombre
                                                newInput.setAttribute("id", "quantity" + (inputList.length+1)); // lui donne son attribut id
                                                newInput.setAttribute("class", "quantity_inputs"); //lui attribue la classe
                                                newInput.addEventListener("change", () => {calcul(event.target)}); //et enfin l'eventListener
                                                 
                                                newInputDiv.appendChild(newInputLabel); //met le label dans la div
                                                newInputDiv.appendChild(newInput) //puis l'input
                                                document.getElementById("container").appendChild(newInputDiv); //et enfin ajoute la div dans le document HTML
                                            }
                                             
                                            var total = 0; // bien déclarer la variable et lui attribuer le type nombre, sinon erreur dans le processus de calcul
                                            var max = <?php echo $profits['TutoCode'] ?>; // la valeur maximale que possède utilisateur
                                            for(i=0; i<inputList.length; i++) //pour chaque input
                                            {
                                                if(!isNaN(inputList[i].value)) // si la valeur est bien numérique
                                                total += inputList[i].value-0; // l'ajouter au total
                                           }
                                        	 rest_nb = parseInt(max - total);
                                        	  if (rest_nb < 0){
                                        		  rest_nb = 0;
                                        	  }
                                        	    for(i=0; i<inputList.length; i++) //pour chaque input
                                            {
                                                if(!isNaN(inputList[i].value) AND inputList[i].value > rest_nb) // si la valeur depasse le restant
                                        		inputList[i].value => inputList[i].rest_nb; // je ne sais pas comment remplacer value par le restant
                                        		 if(!isNaN(inputList[i].value) AND inputList[i].value > max) // si la valeur depasse le restant
                                        		inputList[i].value => ""; // je ne sais pas comment remplacer value par vide
                                        		 if(!isNaN(inputList[i].value) AND inputList[i].value < 0) // si la valeur depasse le restant
                                        		inputList[i].value => 0; // je ne sais pas comment remplacer value par 0
                                        //il faudrait mettre dans le eventListener avec newInput.setAttribute("value", ***); 	
                                        // pareille pour newInput.setAttribute("max", "rest_nb");   le rest_nb est calculer a la fin 
                                        //je ne sais pas si la valeur du input va changer comme ça
                                        
                                           }  
                                        	  
                                            document.getElementById("total_nb").innerHTML = total; // affiche le total dans l'élément "total_nb"
                                            document.getElementById("reste_nb").innerHTML = rest_nb; // affiche le reste
                                        }
                                        </script>



                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                          28 juillet 2021 à 12:12:05

                                          Et bien c'est assez simple.
                                          Comme je le disais, au lieu de laisser une variable php, à ta ligne 2, fais-en une variable globale javascript :

                                          <body>
                                             <script>
                                             var max_total_input = <?php echo $profits['tutoCode']; ?>
                                             </script>

                                          En faisant ça, dans ta fonction calcul, tu peux attribuer cette valeur maximale à chaque nouvel input :

                                          newInput.setAttribute("max", max_total_input);

                                           Ensuite, à la relecture de ton code, je vois déjà des choses qui ne vont pas :

                                          - ligne 31, tu ajoute une propriété max, ayant pour valeur une chaîne de caractères. Enlèves les guillemets si tu veux attribuer la valeur numérique de rest_nb.
                                          - Ligne 32, pour préremplir ton input, il faut modifier la value comme ceci : newInput.value = "la valeur que tu veux mettre".
                                          - ligne 51, il te manque un mot clé ( var ou let ) pour déclarer ta variable ( à moins que ça ne soit déjà fait ailleurs )
                                          - ligne 56, 58 et 60, dans les conditions en javascript, on utilise && et non pas AND
                                          - ligne 57, alors, pour affecter une valeur, c'est le signe =, tout simplement. => n'est utilisé que dans les "arrow functions", une manière abrégée de déclarer des fonctions. De plus, tu veux attribuer la valeur de rest_nb, pas de inputList[i].rest_nb.
                                          - ligne 59 et 61, pareil, signe = et pas =>

                                          Là, on dirait que tu commence à manquer de concentration, ou que tu commence à te "laisser porter" :(
                                          Vérifie grâce à la console, pour chaque nouvelle instruction qui ne fonctionne pas, quelles sont les valeurs des variables impliquées, sont-elles correctes ? quel est le résultat de l'opération demandée, est-il correct ? Y a-t-il des messages d'erreur ?
                                          Bon, je comprend qu'il est peut-être difficile de ne pas s'emmêler les crayons entre les syntaxes php et javascript, mais gardes sous le coude des liens vers des tutos, ou même fais-toi un petit fichier résumé, si il le faut, mais la syntaxe "de base" ne devrait plus te poser trop de problème.



                                          • Partager sur Facebook
                                          • Partager sur Twitter
                                            28 juillet 2021 à 19:02:27

                                            ok merci pour tes explications...

                                            j'ai plus erreur mais j'ai pas les résultats que je veut... ça me modifie tous les input ...je vais essayer de modifier.  

                                            une autre question comment donner une valeur javascript a un max de input

                                            min="1" max="javascript:rest_profits" 



                                            • Partager sur Facebook
                                            • Partager sur Twitter
                                              28 juillet 2021 à 19:25:09

                                              Tu dois travailler ton fichier javascript plutôt que ton html.

                                              relis ce que je t'ai dit sur la ligne 31 ( mais en fait c'est la ligne 32 ). Vire les guillemets, et la valeur de l'attribut max prendra la valeur de la variable javascript rest_nb.

                                              • Partager sur Facebook
                                              • Partager sur Twitter

                                              addition dans boucle

                                              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                              • Editeur
                                              • Markdown