1. Accueil
  2. Codes-Sources
  3. Javascript / DHTML

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

Signaler
Messages postés
21
Date d'inscription
mercredi 6 décembre 2017
Statut
Membre
Dernière intervention
29 décembre 2017
 -
jordane45
Messages postés
28056
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
5 avril 2020
 -
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
A voir également:

9 réponses

Réponse 1 / 9
Messages postés
28056
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
5 avril 2020
 324
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... )



Réponse 2 / 9
Messages postés
21
Date d'inscription
mercredi 6 décembre 2017
Statut
Membre
Dernière intervention
29 décembre 2017
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
jordane45
Messages postés
28056
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
5 avril 2020
 324
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)...





.
Réponse 3 / 9
Messages postés
21
Date d'inscription
mercredi 6 décembre 2017
Statut
Membre
Dernière intervention
29 décembre 2017
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
jmp365
Messages postés
21
Date d'inscription
mercredi 6 décembre 2017
Statut
Membre
Dernière intervention
29 décembre 2017
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
jordane45
Messages postés
28056
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
5 avril 2020
 324
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
jmp365
Messages postés
21
Date d'inscription
mercredi 6 décembre 2017
Statut
Membre
Dernière intervention
29 décembre 2017
 > jordane45
Messages postés
28056
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
5 avril 2020
merci je viens de voir ta réponse... merci pour les enfants
Signaler
jmp365
Messages postés
21
Date d'inscription
mercredi 6 décembre 2017
Statut
Membre
Dernière intervention
29 décembre 2017
 > jordane45
Messages postés
28056
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
5 avril 2020
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
jmp365
Messages postés
21
Date d'inscription
mercredi 6 décembre 2017
Statut
Membre
Dernière intervention
29 décembre 2017
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
Réponse 4 / 9
Messages postés
1750
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
17 mars 2020
 62
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
jmp365
Messages postés
21
Date d'inscription
mercredi 6 décembre 2017
Statut
Membre
Dernière intervention
29 décembre 2017
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)
Réponse 5 / 9
Messages postés
21
Date d'inscription
mercredi 6 décembre 2017
Statut
Membre
Dernière intervention
29 décembre 2017
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
Réponse 6 / 9
Messages postés
28056
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
5 avril 2020
 324
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                                                                 
Réponse 7 / 9
Messages postés
21
Date d'inscription
mercredi 6 décembre 2017
Statut
Membre
Dernière intervention
29 décembre 2017
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
jordane45
Messages postés
28056
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
5 avril 2020
 324
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
jordane45
Messages postés
28056
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
5 avril 2020
 324
J'espère que cette fois ça sera bon.
Bonne soirée.
Réponse 8 / 9
Messages postés
21
Date d'inscription
mercredi 6 décembre 2017
Statut
Membre
Dernière intervention
29 décembre 2017
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
jordane45
Messages postés
28056
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
5 avril 2020
 324
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
jmp365
Messages postés
21
Date d'inscription
mercredi 6 décembre 2017
Statut
Membre
Dernière intervention
29 décembre 2017
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.
Réponse 9 / 9
Messages postés
28056
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
5 avril 2020
 324
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
jmp365
Messages postés
21
Date d'inscription
mercredi 6 décembre 2017
Statut
Membre
Dernière intervention
29 décembre 2017
oui absolument
Signaler
jmp365
Messages postés
21
Date d'inscription
mercredi 6 décembre 2017
Statut
Membre
Dernière intervention
29 décembre 2017
et si je teste par http://tfe.clic-nature.com/images/billets/img_2.png
l'image s'affiche ???
Signaler
jordane45
Messages postés
28056
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
5 avril 2020
 324
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

Merci, cela fonctionne maintenant.
Signaler
jordane45
Messages postés
28056
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
5 avril 2020
 324
Pense à mettre le sujet en résolu.
(icone de roue crantée en haut de ton sujet)
Répondre Posez votre question