Posez votre question Signaler

Décomposition en billets et pièces [Résolu]

jmp365 21 Messages postés mercredi 6 décembre 2017Date d'inscription 29 décembre 2017 Dernière intervention - 6 déc. 2017 à 20:50 - Dernière réponse : jordane45 21041 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 mai 2018 Dernière intervention
- 29 déc. 2017 à 21:28
Javascript / DHTML Posez votre question Signaler
Bonsoir,
j'espère être au bon endroit pour ce post.

Dans le cadre de son TFE, ma fille doit aider des enfants "différents" (handicapés mentaux, autistes, etc.) concernant l'éducation à la santé.
Je suis ne suis pas informaticien, mais j'essaye d'aider ma fille (normalement son établissement scolaire devait lui trouver une école d'informatique pour la partie technique, malheureusement personne n'a été trouvé.
Je me suis mis à la création d'un site internet qui devrait permettre aux enfants de faire virtuellement des achats de produits utilisés pour faire la cuisine. Ils devront choisir des aliments et les envoyer dans un panier. Ce panier sera imprimer afin de se rendre dans les magasins pour y faire les achats.
Mon PROBLEME est le suivant: pour éviter que ces enfants ne se fassent roulés ou ne se trompent, il faudrait qu'une page du site permette de visualiser la décomposition d'un montant en billets et en pièces. Sur excel, pas de problème pour moi, mais je n'arrive pas à intégrer ma feuille de calculs dans une de mes pages Joomla. D'après mes recherches, il faudrait une programmation en javascript, langage que je ne connais malheureusement pas.
Peut être que, parmi vous, certains ont déjà fait ce genre d'exercice.
Si vous pouviez m'aider ou me renvoyer vers des sites, tutoriaux ou autres aides... je suis preneur.
Merci d'avance.
Bonne soirée.

jean-marie
Afficher la suite 

Votre réponse

Répondre au sujet

39 réponses

Signaler Commenter la réponse de jordane45
jordane45 21041 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 mai 2018 Dernière intervention - 6 déc. 2017 à 21:17
0
Utile
Bonjour,


je n'arrive pas à intégrer ma feuille de calculs dans une de mes pages Joomla

Ce n'est en effet pas possible.


j'espère être au bon endroit pour ce post.

Ca dépend... Pourquoi vouloir le faire en javascript ? Pourquoi pas en PHP si jamais tu connais un peu ?

Après.. je te dirais que tout dépend comment tu souhaites le présenter et comment ça doit se "passer".
Si tu as "codé" un panier dans joomla (-donc en php...) pourquoi ne pas générer lors de l'affichage du récap de la commande la fameuse "décomposition" ?
Une image par "type" de monnaie (pieces, billets) ...
Un calcul (en php ) pour savoir combien de chaque il faut (ça tu peux le calculer puisque tu l'as déjà fait sous excel visiblement) .. il suffit donc d'appliquer la formule à ton code php.
puis affichage à l'aide de l'instruction php ECHO et de quelques balises HTML ( <img> pour commencer... )



Commenter la réponse de jordane45
Signaler Commenter la réponse de jmp365
jmp365 21 Messages postés mercredi 6 décembre 2017Date d'inscription 29 décembre 2017 Dernière intervention - Modifié par jmp365 le 8/12/2017 à 16:14
0
Utile
bonjour,

j'avais dit javascript, car j'avais lu sur le net que c'était mieux... PHP je ne connais pas vraiment, juste capable d'aller faire qq modification dans un code.
Mon panier a été réalosé avec Hikashop, mais ne comporte pas de prix.... et l'enseignante voudrait pouvoir se servir de cette décomposition indépendamment du reste. J'aime bien ton commentaire... il suffit d'appliquer... et ensuite qq balises HTML... cela à l'air si facile, probablement pour ceux qui connaissent, mais pour moi cela a l'air très compliqué :-)

Merci de ton aide
Signaler Commenter la réponse de jordane45
jordane45 21041 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 mai 2018 Dernière intervention - 8 déc. 2017 à 20:17
Tu ne sais pas coder en js ...
Tu ne sais pas coder en php ...
Tu n'as pas l'air de vouloir essayer ....

Alors on fait quoi ??

Désolé si ma réponse ne te convient pas mais... ici ... on aide à coder ... on ne fourni pas le travail tout cuit !

De plus..tu n'as pas répondu à la principale question :

Après.. je te dirais que tout dépend comment tu souhaites le présenter et comment ça doit se "passer".

Sans savoir comment fonctionne ton fichier excel actuellement.... ni même comment tu envisagerai le fonctionnement.... il nous sera difficile de te proposer quoi que ce soit.
Et puis.. on ne sait rien du code de ton site ....
A quel endroit se trouve le "montant" à décomposer ? A quel moment veux tu procéder à ce découpage ? Dans quel fichier comptes tu mettre ton code (js ou php...peu importe)...





.
Commenter la réponse de jmp365
Signaler Commenter la réponse de jmp365
jmp365 21 Messages postés mercredi 6 décembre 2017Date d'inscription 29 décembre 2017 Dernière intervention - 9 déc. 2017 à 10:42
0
Utile
Bonjour,

je trouve tes paroles blessantes, je n’ai jamais demandé qu’on me fournisse le code tout fait, mais si tu avais bien lu mon premier post, je demandais de l’aide pour trouver des tutoriaux ou des sites internet sur le sujet.

Tu m’as déjà aidé en me signalant que le PHP était plus approprié.

Pour répondre à tes questions:
- mon site est en Joomla
- la décomposition devrait se trouver dans un article du site
- c’est l’enfant qui devrait introduire le montant, qui sera totalement indépendant du reste du site
- mon fichier Excel comporte une feuille cachée avec les calculs et une feuille visible comportant une cellule ou introduire le montant et des cellules contenant le resultat de la décomposition, chacune de ces cellules sera placée à côté des l’image du billet ou de la pièce correspondante.

Merci de prendre le temps de me lire
Bon week-end
Afficher les 8 commentaires
Signaler Commenter la réponse de jmp365
jmp365 21 Messages postés mercredi 6 décembre 2017Date d'inscription 29 décembre 2017 Dernière intervention - 9 déc. 2017 à 16:51
Ma fille trouve cela génial, elle te dit bien merci.

J'ai une question, je sais que je suis difficile :-) Pour faciliter l'utilisation par ces enfants handicapés, serait-il difficile de modifier ce code pour que seul les billets ou pièces utilisées soient affichés? Si c'est difficile ou trop long à faire, laisse tomber... tu nous as déjà rendu un fameux service.
MERCI ENCORE
Signaler Commenter la réponse de jordane45
jordane45 21041 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 mai 2018 Dernière intervention - 9 déc. 2017 à 16:58
Il faut jouer avec la propriété de style "display" et ajouter une petite condition dans le code.
Comme ceci : 

<!DOCTYPE html>
<html lang="fr"
  <head>
    <meta charset="utf-8">
    <title>money is money...</title>
	
  <style>  
    .form-inline{
      display:inline-block;
      padding:8px;
      width:50%;
    }
    
    .argent{
      width:200px;
      height:100px;
      border-width: 1px; 
      border-radius: 10px; 
      border-color: grey;
      display:none;
    }
    .argent img{
      max-width:50%;
      
    }
  </style>
  </head>
  <body>
 
    <div class="form-inline">
      <input type="text" id="montantacalculer">
      <input type="button" value="calculer" onclick="calculerRepartition()">
    </div>
    <div class="affichage">
    
      <div class="argent">
        <img src="billet500.png">
        <span id="nb_500"></span>
      </div>
      <div class="argent">
        <img src="billet200.png">
        <span id="nb_200"></span>
      </div>
      <div class="argent">
        <img src="billet100.png">
        <span id="nb_100"></span>
      </div>
      <div class="argent">
        <img src="billet50.png">
        <span id="nb_50"></span>
      </div>
      <div class="argent">
        <img src="billet20.png">
        <span id="nb_20"></span>
      </div>
      <div class="argent">
        <img src="billet10.png">
        <span id="nb_10"></span>
      </div>
    <div class="argent">
        <img src="billet5.png">
        <span id="nb_5"></span>
      </div>
    
    <div class="argent">
        <img src="piece2.png">
        <span id="nb_2"></span>
      </div>
      <div class="argent">
        <img src="piece1.png">
        <span id="nb_1"></span>
      </div>
      <div class="argent">
        <img src="piece50ct.png">
        <span id="nb_0.5"></span>
      </div>
      <div class="argent">
        <img src="piece20ct.png">
        <span id="nb_0.2"></span>
      </div>
      <div class="argent">
        <img src="piece10ct.png">
        <span id="nb_0.1"></span>
      </div>
    </div>
 
    <script type="text/javascript">
      function calculerRepartition(){
        var BreakException = {};
        var montantacalculer = parseFloat(document.getElementById('montantacalculer').value);
        var a = ['500','200','100','50','20','10','5','2','1','0.5','0.2','0.1'];
        try {
          a.forEach(function(montant) {
            var calc = divrest(montant,montantacalculer);
            console.log(montant + "->>" + calc[0] + ' reste:'+ calc[1]);
            var id_span_ou_ecrire = 'nb_'+montant;
            var spanMontant = document.getElementById(id_span_ou_ecrire);
            var nbValeur = parseInt(calc[0]);
            if(typeof(spanMontant)!='undefined' && spanMontant!=null && nbValeur ){
              spanMontant.innerHTML = nbValeur + "* " + montant;
              if(nbValeur>0){
                spanMontant.parentElement.style.display='block';
              }
              //si il y a un reste
              if(calc[1] > 0){
                montantacalculer = calc[1];
              }else{
                throw BreakException;
              }
            }
          });        
        } catch (e) {
          //pour sortir de la boucle
          if (e !== BreakException) throw e;
        }
      }
  
      function divrest(valArgent,montantrestant){
         var result=[];
         result[0] = montantrestant / valArgent;
         result[1] = montantrestant % valArgent;
         return result;
      }
    </script>
  </body>
</html>

Bien entendu, pour les images .. tu mets ce que tu veux.
le "src" que j'ai utilisé c'était pour que tu saches bien à quoi ça correpondait...
Signaler Commenter la réponse de jmp365
jmp365 21 Messages postés mercredi 6 décembre 2017Date d'inscription 29 décembre 2017 Dernière intervention > jordane45 21041 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 mai 2018 Dernière intervention - 12 déc. 2017 à 09:21
merci je viens de voir ta réponse... merci pour les enfants
Signaler Commenter la réponse de jmp365
jmp365 21 Messages postés mercredi 6 décembre 2017Date d'inscription 29 décembre 2017 Dernière intervention > jordane45 21041 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 mai 2018 Dernière intervention - 12 déc. 2017 à 09:36
bonjour, tu n'as pas pu regarder pour les erreurs dans les calculs? Je viens de faire un essai avec le nouveau code... 9.47 entré et ici j'obtiens 1x5 + 2x2 + 2x0.2 + 1x0.05 + 1x0.02 + 6x0.01 = 9.53 bizarre
Signaler Commenter la réponse de jmp365
jmp365 21 Messages postés mercredi 6 décembre 2017Date d'inscription 29 décembre 2017 Dernière intervention - 9 déc. 2017 à 17:27
Oups!! Un petit bug... certaines décompositions ne sont pas justes, peut être une question d'arrondi???
Voici le code que j'ai modifié 
<!DOCTYPE html>
<html lang="fr"
  <head>
    <meta charset="utf-8">
    <title>money is money...</title>
 
  <style>  
    .form-inline{
      display:inline-block;
      padding:8px;
      width:50%;
    }
    
    .argent{
      width:200px;
      height:100px;
      border-width: 1px; 
      border-radius: 10px; 
      border-color: grey;
    }
    .argent img{
      max-width:50%;
      
    }
  </style>
  </head>
  <body>
 
    <div class="form-inline">
      <input type="text" id="montantacalculer">
      <input type="button" value="calculer" onclick="calculerRepartition()">
    </div>
    <div class="affichage">
    
      <div class="argent">
        <img src="billet500.png">
        <span id="nb_500"></span>
      </div>
      <div class="argent">
        <img src="billet200.png">
        <span id="nb_200"></span>
      </div>
      <div class="argent">
        <img src="billet100.png">
        <span id="nb_100"></span>
      </div>
      <div class="argent">
        <img src="billet50.png">
        <span id="nb_50"></span>
      </div>
   <div class="argent">
  <img src="billet20.png">
  <span id="nb_20"></span>
  </div> 
      <div class="argent">
        <img src="billet10.png">
        <span id="nb_10"></span>
      </div>
    <div class="argent">
        <img src="billet5.png">
        <span id="nb_5"></span>
      </div>
    
    <div class="argent">
        <img src="piece2.png">
        <span id="nb_2"></span>
      </div>
      <div class="argent">
        <img src="piece1.png">
        <span id="nb_1"></span>
      </div>
      <div class="argent">
        <img src="piece50ct.png">
        <span id="nb_0.5"></span>
      </div>
      <div class="argent">
        <img src="piece20ct.png">
        <span id="nb_0.2"></span>
      </div>
      <div class="argent">
        <img src="piece10ct.png">
        <span id="nb_0.1"></span>
      </div>
   <div class="argent">
  <img src="piece5ct.png">
  <span id="nb_0.05"></span>
    </div>
   <div class="argent">
  <img src="piece2ct.png">
  <span id="nb_0.02"></span>
 </div> 
    <div class="argent">
  <img src="piece1ct.png">
  <span id="nb_0.01"></span>
 </div>
    <script type="text/javascript">
      function calculerRepartition(){
        var BreakException = {};
        var montantacalculer = parseFloat(document.getElementById('montantacalculer').value);
        var a = ['500','200','100','50','20','10','5','2','1','0.5','0.2','0.1','0.05','0.02','0.01'];
        try {
          a.forEach(function(montant) {
            var calc = divrest(montant,montantacalculer);
            console.log(montant + "->>" + calc[0] + ' reste:'+ calc[1]);
            var id_span_ou_ecrire = 'nb_'+montant;
            var spanMontant = document.getElementById(id_span_ou_ecrire);
            var nbValeur = parseInt(calc[0]);
            if(typeof(spanMontant)!='undefined' && spanMontant!=null ){
              spanMontant.innerHTML = nbValeur + "* " + montant;
              //si il y a un reste
              if(calc[1] > 0){
                montantacalculer = calc[1];
              }else{
                throw BreakException;
              }
            }
          });        
        } catch (e) {
          //pour sortir de la boucle
          if (e !== BreakException) throw e;
        }
      }
  
      function divrest(valArgent,montantrestant){
         var result=[];
         result[0] = montantrestant / valArgent;
         result[1] = montantrestant % valArgent;
         return result;
      }
    </script>
  </body>
</html>


EDIT : Ajout du LANGAGE dans les balises de code (la coloration syntaxique).

Explications disponibles ici :ICI

Merci d'y penser dans tes prochains messages.
Jordane45


J'ai rajouté le billet de 20 et les pièces rouges 5 ct, 2 ct et 1 ct qui sont tjs utilisées en Belgique.
Je viens de décomposer 9.47 € et j'obtiens 1x5 + 2x2 + 2x0.2 + 1x0.02 + 6x0.01 = 9.48 €
Et pourquoi 6x0.01???
C'est bizarre... si tu peux m'éclairer... merci
Commenter la réponse de jmp365
Signaler Commenter la réponse de @karamel
@karamel 1655 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 19 avril 2018 Dernière intervention - 9 déc. 2017 à 11:25
0
Utile
bonjour

pour simplifier il faut reproduire,retranscrire la méthode de calcule d'excel il faut donc comprendre comment fonctionne le calcule sur exel
Signaler Commenter la réponse de jmp365
jmp365 21 Messages postés mercredi 6 décembre 2017Date d'inscription 29 décembre 2017 Dernière intervention - 9 déc. 2017 à 12:20
Le calcul sur Excel est assez simple il ne fait appel qu’a des divisions, soustractions ainsi que la fonction ENT (entier) et MOD (reste d’une division)
Commenter la réponse de @karamel
Signaler Commenter la réponse de jmp365
jmp365 21 Messages postés mercredi 6 décembre 2017Date d'inscription 29 décembre 2017 Dernière intervention - Modifié par jmp365 le 16/12/2017 à 14:46
0
Utile
Bonjour, certains vont peut être trouver que je ne suis jamais content, car après avoir reçu généreusement, de Jordane45, le codage de mon problème, je reviens encore vers vous pour deux bugs.
J'ai essayé de comprendre le code fourni, pour essayer de faire les corrections moi-même, mais je dois me rendre à l'évidence: je n'ai pas les compétences pour y arriver, dommage.

Le premier bug est un problème de calculs, si on teste par exemple 9.47€ on aura 1x5 + 2x2 +2x0.2 + 1x0.05 + 1x0.02 + 6x0.01 ce qui fait 9.53 €… je me demande si ce n’est pas une question d’arrondis multiples dans les calculs vu qu’il y a l’utilisation de boucle ??
http://tfe.clic-nature.com/index.php/euros

Le second problème concerne la fin du calcul, si on reste sur la page et qu’on réintroduit un nouveau montant, on a parfois des résultats aberrants, comme si certains résultats étaient conservés. Fermer la page et la rouvrir corrige ce problème.
Sur les 9.47 de l’exemple précédent, je change le 9.47 en 12.39 après avoir fait calculer, j’obtiens 1x10 + 1x5 +1x2 +1x0.2 + 1x0.1 + 1x0.05 + 2x0.02 + 5x0.01 = 17.42 ????

le code se trouve dans le message 13 ci-dessus.

Merci d'avance.

Bon week-end
Commenter la réponse de jmp365
Signaler Commenter la réponse de jordane45
jordane45 21041 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 mai 2018 Dernière intervention - Modifié par jordane45 le 16/12/2017 à 16:43
0
Utile
Tout est là : 

      function calculerRepartition(){
        //on commence par tout réinitialiser
        reinit();
        var BreakException = {};
        var totalCalcul = 0;
        var montantacalculer = parseFloat(document.getElementById('montantacalculer').value);
        var a = ['500','200','100','50','20','10','5','2','1','0.5','0.2','0.1'];
        try {
          a.forEach(function(montant) {
            var calc = divrest(montant,montantacalculer);
            //console.log(montant + "->>" + calc[0] + ' reste:'+ calc[1]);
            var id_span_ou_ecrire = 'nb_'+montant;
            var spanMontant = document.getElementById(id_span_ou_ecrire);
            var nbValeur = parseInt(calc[0]);
            
            if(typeof(spanMontant)!='undefined' && spanMontant!=null && nbValeur ){
              spanMontant.innerHTML = nbValeur + "* " + montant;
              totalCalcul += nbValeur*montant;
              if(nbValeur>0){
                spanMontant.parentElement.style.display='block';
              }
              //si il y a un reste
              if(calc[1] > 0){
                montantacalculer = calc[1];
              }else{
                throw BreakException;
              }
              
              //si on a atteint le montant à calculer
              if(totalCalcul == montantacalculer){
                throw BreakException;
              }
            }
          });        
        } catch (e) {
          //pour sortir de la boucle
          if (e !== BreakException) throw e;
        }
      }
  
      function divrest(valArgent,montantrestant){
         var result=[];
         result[0] = montantrestant / valArgent;
         result[1] = arrondiauDizieme((parseFloat(montantrestant) - parseInt(result[0])*valArgent));
         return result;
      }
      
      function reinit(){
        //on récupère toutes les div 'argent'
        var x = document.getElementsByClassName("argent");
        if(typeof(x)!='undefined' && x !=null){
          for (var i = 0; i < x.length; i ++) {
            //on masque les div
            x[i].style.display = 'none';
            //on remet les compteurs à zéro
            var spa = x[i].getElementsByTagName('span');
            spa.innerHTML = "";
          } 
        }else{
           alert('Aucune DIV ne comporte la class "argent"');
        }  
      }
      
      function arrondiauDizieme(nombre){
        return Math.round(10*nombre)/10;
      }


C'était en effet un pb d'arrondi;

J'ai aussi ajouté la réinitialisation .

Cordialement, 
Jordane                                                                 
Commenter la réponse de jordane45
Signaler Commenter la réponse de jmp365
jmp365 21 Messages postés mercredi 6 décembre 2017Date d'inscription 29 décembre 2017 Dernière intervention - Modifié par jmp365 le 16/12/2017 à 17:00
0
Utile
merci beaucoup pour ta correction, mais est-ce normal que lorsque j'essaye 85.39 € j'ai comme décomposition en billet et pièce pour un total de 85.40 € ?
Pour 7.47€ j'ai 7.50 € : 1x5 + 1x2 + 1x0.5
Je suis désolé de chicaner, mais pour les enfants ce n'est pas possible d'avoir de telles différences.
Il arrondi au dixième et pas au centième d'euros

J'ai essayé en modifiant arrondirauDizieme par arrondirauCentieme mais cela ne corrige rien :-)

Encore merci pour tout ce que tu as fait pour moi et surtout pour eux.
Signaler Commenter la réponse de jordane45
jordane45 21041 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 mai 2018 Dernière intervention - 16 déc. 2017 à 17:12
Petite erreur...
Il suffit de changer cette fonction 
function arrondiauDizieme(nombre){
        return Math.round(10*nombre)/10;
      }


Par exemple 
function arrondiauCentieme(nombre){
        return Math.round(100*nombre)/100;
      }

et bien entendu, modifié son appel dans le code : 
 function divrest(valArgent,montantrestant){
         var result=[];
         result[0] = montantrestant / valArgent;
         result[1] = arrondiauCentieme((parseFloat(montantrestant) - parseInt(result[0])*valArgent));
         return result;
      }


Enfin bon.. sans vouloir être trop désagréable... tu aurais pu trouver par toi même si tu avais lu le code un minimum...
Mais bon....
Signaler Commenter la réponse de jordane45
jordane45 21041 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 mai 2018 Dernière intervention - 16 déc. 2017 à 17:12
J'espère que cette fois ça sera bon.
Bonne soirée.
Commenter la réponse de jmp365
Signaler Commenter la réponse de jmp365
jmp365 21 Messages postés mercredi 6 décembre 2017Date d'inscription 29 décembre 2017 Dernière intervention - 28 déc. 2017 à 16:51
0
Utile
bonjour, le programme a été testé par les enfants, pour une grande partie de ceux-ci cela fonctionne bien. Par contre pour les enfants les plus déficients, ils ont des problème avec le nombre de billets ou de pièces... ils ne savent pas lire les nombres... serait-il possible (je pense que oui, j'ai fait pas mal d'essais, mais je n'arrive pas) d'afficher l'ensemble des images pour faire le montant. Si je m'exprime mal: par exemple s'il y a 2*20 € voir deux billets de 20€... plutôt qu'un billet et à coté 2*20 etc.
Merci et désolé d'encore vous solliciter.
Bonne soirée.
Signaler Commenter la réponse de jordane45
jordane45 21041 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 mai 2018 Dernière intervention - 28 déc. 2017 à 17:57
Ca demande quelques évolutions dans le code...
La première chose à voir c'est :
As tu une image différentes pour chaque cas ( une image avec 2billets de 20 ... une image avec 3 billets de 10...) ou veux tu juste avoir (côte à côte) x fois la même image qui se répète ?

Ensuite.... par ce que bon.. à l'origine c'est comme ça que ça marche sur ce forum ... montre nous ce que tu as essayé de faire et indique nous sur quoi tu bloques....



Pour t'aider, je pense que les DIV "argent" devront être modifiées de la sorte : 
<div class="argent">
        <div id="images_0.1"></div>
        <span id="nb_0.1"></span>
      </div>

La 
 <div id="images_0.1"></div>
servira de "container" pour y placer la/les image(s) correspondantes.

En gros.. dans le JS, il faudra (au même endroit que là où on écrit le "nombre" d'argent (pièce/billet.) ajouter un bout de code qui crééra des balises IMG dans ce container

par exemple (juste pour illustrer) : 
document.getElementById("images_0.1").innerHTML = "<img src='tonimage'>";
Signaler Commenter la réponse de jmp365
jmp365 21 Messages postés mercredi 6 décembre 2017Date d'inscription 29 décembre 2017 Dernière intervention - 28 déc. 2017 à 18:43
je n'aurais pas une image différente pour chaque cas, mais avoir cote à cote x fois la même image.

J'ai tellement trituré le code que j'ai tout jeté... mais à voir ce que tu à mis comme code, j'étais très loin de là... il faut que tu saches que je dois, pour chaque commande écrit dans ton code, aller sur le net pour essayer de comprendre ce que cela veut dire et surtout ce que cela fait... quand je modifie une ligne ou une partie de ligne je regarde ce que j'ai réussi à modifier...
Je vais essayer de comprendre les 6 lignes que tu viens de publier.
Pour ne pas que tu crois que je ne fais rien et que j'attends patiemment que la solution tombe toute seule, va voir ce que j'ai fait ces dernières semaines pour essayer d'aider ces enfants...
www.tfe.clic-nature.com
Merci bcp et bonne soirée.
Commenter la réponse de jmp365
Signaler Commenter la réponse de jordane45
jordane45 21041 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 mai 2018 Dernière intervention - 28 déc. 2017 à 19:18
0
Utile
Ceci devrait faire l'affaire : 
<!DOCTYPE html>
<html lang="fr"
  <head>
    <meta charset="utf-8">
    <title>money is money...</title>
	
  <style>  
    .form-inline{
      display:inline-block;
      padding:8px;
      width:50%;
    }
    
    .argent{
      width:200px;
      height:100px;
      border-width: 1px; 
      border-radius: 10px; 
      border-color: grey;
      display:none;
    }
    .argent .divimg{
      max-width:80%
    }
    .argent .divimg .img{
      max-width:50px;
      
    }
  </style>
  </head>
  <body>
 
    <div class="form-inline">
      <input type="text" id="montantacalculer">
      <input type="button" value="calculer" onclick="calculerRepartition()">
    </div>
    <div class="affichage">
    
      <div class="argent">
        <div id="img_500" class="divimg"></div>
        <span id="nb_500"></span>
      </div>
      <div class="argent">
        <div id="img_200" class="divimg"></div>
        <span id="nb_200"></span>
      </div>
      <div class="argent">
        <div id="img_100" class="divimg"></div>
        <span id="nb_100"></span>
      </div>
      <div class="argent">
        <div id="img_50" class="divimg"></div>
        <span id="nb_50"></span>
      </div>
      <div class="argent">
        <div id="img_20" class="divimg"></div>
        <span id="nb_20"></span>
      </div>
      <div class="argent">
        <div id="img_10" class="divimg"></div>
        <span id="nb_10"></span>
      </div>
    <div class="argent">
        <div id="img_5" class="divimg"></div>
        <span id="nb_5"></span>
      </div>
    
    <div class="argent">
        <div id="img_2" class="divimg"></div>
        <span id="nb_2"></span>
      </div>
      <div class="argent">
        <div id="img_1" class="divimg"></div>
        <span id="nb_1"></span>
      </div>
      <div class="argent">
        <div id="img_0.5" class="divimg"></div>
        <span id="nb_0.5"></span>
      </div>
      <div class="argent">
        <div id="img_0.2" class="divimg"></div>
        <span id="nb_0.2"></span>
      </div>
      <div class="argent">
        <div id="img_0.1" class="divimg"></div>
        <span id="nb_0.1"></span>
      </div>
    </div>
 
    <script type="text/javascript">
        function calculerRepartition(){
        //on commence par tout réinitialiser
        reinit();
        var BreakException = {};
        var totalCalcul = 0;
        var montantacalculer = parseFloat(document.getElementById('montantacalculer').value);
        var a = ['500','200','100','50','20','10','5','2','1','0.5','0.2','0.1'];
        try {
          a.forEach(function(montant) {
            var calc = divrest(montant,montantacalculer);
            //console.log(montant + "->>" + calc[0] + ' reste:'+ calc[1]);
            var id_span_ou_ecrire = 'nb_'+montant;
            var spanMontant = document.getElementById(id_span_ou_ecrire);
            var id_div_image = "img_"+montant;
            var divImg = document.getElementById(id_div_image);
            var nbValeur = parseInt(calc[0]);
            
            if(typeof(spanMontant)!='undefined' && spanMontant!=null && nbValeur ){
              spanMontant.innerHTML = nbValeur + "* " + montant;
              divImg.innerHTML = addImg(nbValeur,montant);
              totalCalcul += nbValeur*montant;
              if(nbValeur>0){
                spanMontant.parentElement.style.display='block';
              }
              //si il y a un reste
              if(calc[1] > 0){
                montantacalculer = calc[1];
              }else{
                throw BreakException;
              }
              
              //si on a atteint le montant à calculer
              if(totalCalcul == montantacalculer){
                throw BreakException;
              }
            }
          });        
        } catch (e) {
          //pour sortir de la boucle
          if (e !== BreakException) throw e;
        }
      }
  
      function divrest(valArgent,montantrestant){
         var result=[];
         result[0] = montantrestant / valArgent;
         result[1] = arrondiauCentieme((parseFloat(montantrestant) - parseInt(result[0])*valArgent));
         return result;
      }
      
      function arrondiauCentieme(nombre){
        return Math.round(100*nombre)/100;
      }
      
      
      function reinit(){
        //on récupère toutes les div 'argent'
        var x = document.getElementsByClassName("argent");
        if(typeof(x)!='undefined' && x !=null){
          for (var i = 0; i < x.length; i ++) {
            //on masque les div
            x[i].style.display = 'none';
            //on remet les compteurs à zéro
            var spa = x[i].getElementsByTagName('span');
            spa.innerHTML = "";
          } 
        }else{
           alert('Aucune DIV ne comporte la class "argent"');
        }  
      }
      
     
     //génère X balises img
     function addImg(nbImgToAdd,valeurArgent){
        var retour = "";
        for(var i=1;i<=nbImgToAdd;i++){
          retour += createImg('img_' + valeurArgent);
        }
        return retour;    
     }
     
     //génère le html d'une balise IMG
     // les images seront nommées img_100.png  img_0.2.img ..etc...
     function createImg(idImg){
       return "<img src='"+idImg+".png'></img>";
     }

      
     
     
    </script>
  </body>
</html>


NB : Tu dois renommer les images de tes billets et pièces sous la forme :
img_valeur.png
Par exemple : pour le billet de 500 : img_500.png
pour la pièce de 10ct : img_0.1.png
etc...
Afficher les 16 commentaires
Signaler Commenter la réponse de jmp365
jmp365 21 Messages postés mercredi 6 décembre 2017Date d'inscription 29 décembre 2017 Dernière intervention - 29 déc. 2017 à 17:57
oui absolument
Signaler Commenter la réponse de jmp365
jmp365 21 Messages postés mercredi 6 décembre 2017Date d'inscription 29 décembre 2017 Dernière intervention - 29 déc. 2017 à 18:14
et si je teste par http://tfe.clic-nature.com/images/billets/img_2.png
l'image s'affiche ???
Signaler Commenter la réponse de jordane45
jordane45 21041 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 mai 2018 Dernière intervention - 29 déc. 2017 à 20:24
Comme ceci : 
//génère le html d'une balise IMG
// les images seront nommées img_100.png img_0.2.img ..etc...
function createImg(idImg){
return "<img src='../images/billets/"+idImg+".png'></img>";
}


NB : Au fait ...pour poster du code sur le forum.. merci d'utiliser la coloration syntaxique (les balises de code).
Explications disponibles ici : http://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
Signaler Commenter la réponse de jmp365
jmp365 - 29 déc. 2017 à 21:07
Merci, cela fonctionne maintenant.
Signaler Commenter la réponse de jordane45
jordane45 21041 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 mai 2018 Dernière intervention - 29 déc. 2017 à 21:28
Pense à mettre le sujet en résolu.
(icone de roue crantée en haut de ton sujet)
Commenter la réponse de jordane45

Votre réponse

Répondre au sujet
Posez votre question
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.