Convertisseur

Résolu
GanBoy_7575 Messages postés 8 Date d'inscription   Statut Membre Dernière intervention   -  
GanBoy_7575 Messages postés 8 Date d'inscription   Statut Membre Dernière intervention   -
Salut la commu j'ai besoin d'un coup de main. Pour réaliser un convertisseur de devise je dois réaliser un form à choix multiple comme ça: 
<h2 class="pb-3 heading">Convertisseur</h2>
                    <form id="formulaire">
                        
                        <div class="form-group">
                            <div class="input-group">
                                <input type="number" id="convertisseur" class="form-control">
                                <select class="custom-select col-3" id="liste">
                                        <option value="0">$</option>
                                        <option value="1">£</option>
                                        <option value="2">¥</option>
                                    </select>
                            </div>
                        </div>
                        
                       
                        <div class="form-group">
                            <input type="submit" value="Convertir" class="btn btn-info btn-block">
                        </div>
                        
                    </form>


Le soucis c'est que je n'arrive pas à changer le taux de change selon la devise sélectionnée. Merci d'avance.
A voir également:

10 réponses

Réponse 1 / 10
yg_be Messages postés 23541 Date d'inscription   Statut Contributeur Dernière intervention   Ambassadeur 1 584
 
bonjour, qu'as-tu essayé?
sans doute utile: https://www.commentcamarche.net/infos/25899-demander-de-l-aide-pour-vos-exercices-sur-ccm/
0
Réponse 2 / 10
GanBoy_7575 Messages postés 8 Date d'inscription   Statut Membre Dernière intervention  
 
Bonjour à toi. J'ai essayé ça 
function calculResultats(e){


    const convertisseur = document.getElementById('convertisseur');
    const euro = document.getElementById('euro');
    const convertDevise = parseFloat(convertisseur.value);
    const conversion = (convertDevise);
    const select = document.getElementById('liste');
    const choice = select.value;
    
 document.getElementById('list').addEventListener('change',function (e) {
  

  if (choice === 0) {
   euro.value = (conversion * 0.88).toFixed(2);
        document.getElementById('resultats').style.display = 'block';
        document.getElementById('chargement').style.display = 'none';
  } else if (choice === 1) {
 euro.value = (conversion * 1.11).toFixed(2);
        document.getElementById('resultats').style.display = 'block';
        document.getElementById('chargement').style.display = 'none';
     } else if (choice === 2) {
euro.value = (conversion * 0.01).toFixed(2);
        document.getElementById('resultats').style.display = 'block';
        document.getElementById('chargement').style.display = 'none';
 
  }
else{
       alert ('Merci de vérifier votre saisie'); }});}


Je débute dans le développement et je souhaite surtout pas qu'on me donne la solution mais juste m'expliqué, soit où je me trompe ou (et je pense que c'est le cas) me dire que ce code là n'est pas bon et que c'est une autre méthode qui doit être utilisé.
0
Réponse 3 / 10
jordane45 Messages postés 38480 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
Bonjour,

Tu ne nous as pas donné le code complet ... ou alors il manque du html.
Il faudrait aussi faire correctement l'indentation du code.

Ensuite,
Tu ne dois pas mettre le addeventlistener dans la fonction calculResultats
mais au contraire, faire appel à cette fonction depuis le addeventlistener

Le terme const permet de déclarer des CONSTANTES.
Donc, l'utiliser pour des variables "changeantes" n'est pas bon. A la place, tu dois utiliser le mot clé : VAR ou LET

Tu n'as pas besoin de faire 
const select = document.getElementById('liste');
    const choice = select.value;

vu que le addeventlistener cible déjà ta liste.
Donc le choix s'écrit (dans le addeventlistener ) 
document.getElementById('list').addEventListener('change',function (e) {
  var choice = this.value;
  alert('Choix = ' + choice);

});


Ton code corrigé devrait ressembler à un truc du genre 
<!DOCTYPE html>
<html lang="fr">
  <head>
  <meta charset="utf-8"/>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>TTTTT</title>
  </head>
  <body>
  <h2 class="pb-3 heading">Convertisseur</h2>
  <form id="formulaire">
      
    <div class="form-group">
      <div class="input-group">
        <input type="number" id="convertisseur" class="form-control">
        <select class="custom-select col-3" id="liste">
          <option value="0">$</option>
          <option value="1">£</option>
          <option value="2">¥</option>
        </select>
      </div>
    </div>  
    <div class="form-group">
        <input type="submit" value="Convertir" class="btn btn-info btn-block">
    </div>  
  </form>
  
  <div id="resultats" style="display:none">
    <input type="number" id="euro" value="0">
  </div>
  <div id="chargement" style="display:none">
   ...
  </div>
  <script language="JavaScript">
  
 
  
  function calculResultats(choice){
    var convertisseur = document.getElementById('convertisseur');
    var euro = document.getElementById('euro');
    var convertDevise = parseFloat(convertisseur.value);
    
    if (choice == 0) {
      euro.value = (convertDevise * 0.88).toFixed(2);
      document.getElementById('resultats').style.display = 'block';
      document.getElementById('chargement').style.display = 'none';
    } else if (choice == 1) {
      euro.value = (convertDevise * 1.11).toFixed(2);
      document.getElementById('resultats').style.display = 'block';
      document.getElementById('chargement').style.display = 'none';
    } else if (choice == 2) {
      euro.value = (convertDevise * 0.01).toFixed(2);
      document.getElementById('resultats').style.display = 'block';
      document.getElementById('chargement').style.display = 'none';
    }else{
      alert ('Merci de vérifier votre saisie');
    }
  }
  
  
  document.getElementById('liste').addEventListener('change',function (e) {
    var choix = this.value;
    console.log("choix",choix);
    calculResultats(choix); // appel de la fonction
  });
  
  
  </script>
</body>
</html>


0
Réponse 4 / 10
GanBoy_7575 Messages postés 8 Date d'inscription   Statut Membre Dernière intervention  
 
Oui je n'ai effectivement pas tout mis afin que ce soit ciblé sur le problème et faire en sorte qu ce soit le plus clair possible.

Du coup si je comprend ta correction, d'une part c'est de ne pas utiliser de constantes mais des variables var ou let, et en suite de simplifier ma fonction avec le this value? cela renvoie automatiquement sur la fonction qui l'a précède? C'est les seules choses qui sont incorrects?
0
jordane45 Messages postés 38480 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
Des ID qui n'étaient pas les bons... list au lieu de liste par exemple...
Le fait de ne pas mettre le addeventlistenr DANS la fonction
Bref, regarde le code que je t'ai donné et compare le avec le tient... tout y est
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 10
GanBoy_7575 Messages postés 8 Date d'inscription   Statut Membre Dernière intervention  
 
Oui effectivement, je suis passé à côté de ça comme un boulet.

Ton code marche nickel mais serait-il possible de faire qu'ils convertisse en appuyant sur le bouton convertir et non dés qu'on change la devise? J'ai créé une petite animation de chargement et je souhaite lui donné le temps de s'effectué, juste en passant par le bouton. J'y suis arrivé quand il n'y avait qu'une seule option mais avec l'input select je n'y arrive pas.
0
jordane45 Messages postés 38480 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
Déjà, vu que tu n'utilises pas de langage serveur, remplace le "submit" de ton bouton par "button".

Ensuite, retire le addevenlistener de la liste... et place le sur le bouton.
0
Réponse 6 / 10
GanBoy_7575 Messages postés 8 Date d'inscription   Statut Membre Dernière intervention  
 
Que veut tu dire par l'enlever de la liste et le placer sur le bouton?
0
jordane45 Messages postés 38480 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
Qu'est-ce qui, actuellement, déclenche la fonction calculResultats ?
0
Réponse 7 / 10
GanBoy_7575 Messages postés 8 Date d'inscription   Statut Membre Dernière intervention  
 
L'input select. En essayant la facilité j'ai changé le getElement qui visait la liste par le bouton mais en faisant ça la console me met que ce n'est pas une fonction. Je sais que je débute mais j'ai l'impression d'être idiot pour le coup de pas voir où ça coince...
0
jordane45 Messages postés 38480 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
Tu as mis un ID à ton bouton ?
Tu as retiré le submit ?

montre ton nouveau code si tu veux qu'on puisse t'aider à le corriger.
pense à bien aligner ton code tel que je l'ai fait dans celui que je t'ai donné.
0
Réponse 8 / 10
GanBoy_7575 Messages postés 8 Date d'inscription   Statut Membre Dernière intervention  
 
Voici mon code html 
<h2 class="pb-3 heading">Convertisseur</h2>
                    <form id="formulaire">
                        
                        <div class="form-group">
                            <div class="input-group">
                                <input type="number" id="convertisseur" class="form-control">
                                <select class="custom-select col-3" id="liste">
                                    <option value="0">$</option>
                                    <option value="1">£</option>
                                    <option value="2">¥</option>
                                </select>
                            </div>
                        </div>
                        
                       
                        <div class="form-group">
                            <input type="submit" id="button" value="Convertir" class="btn btn-info btn-block">
                        </div>
                        
                    </form>
                    
                    <!-- Image pour le chargement -->
                    
                    <div id="chargement">
                        <img src="(image en gif)" alt="">
                    </div>
                    
                   <div id="resultats">
                       <h5 class="pt-4">Résultats</h5>
                        <div class="form-group">
                           <div class="input-group">
                                <input type="number" id="euro" class="form-control">
                                <span class="input-group-text">€</span>
                            </div>
                        </div>
                       
                      

                   </div>


mon code js 
document.getElementById('formulaire').addEventListener('submit',function(e){
    
    document.getElementById('resultats').style.display = 'none';
    
    document.getElementById('chargement').style.display = 'block';
    
    
    setTimeout(calculResultats,2000);
   
    e.preventDefault();
    
    
});

  function calculResultats(choice){
    var convertisseur = document.getElementById('convertisseur');
    var euro = document.getElementById('euro');
    var convertDevise = parseFloat(convertisseur.value);
    
    if (choice == 0) {
      euro.value = (convertDevise * 0.88).toFixed(2);
      document.getElementById('resultats').style.display = 'block';
      document.getElementById('chargement').style.display = 'none';
    } else if (choice == 1) {
      euro.value = (convertDevise * 1.11).toFixed(2);
      document.getElementById('resultats').style.display = 'block';
      document.getElementById('chargement').style.display = 'none';
    } else if (choice == 2) {
      euro.value = (convertDevise * 0.01).toFixed(2);
      document.getElementById('resultats').style.display = 'block';
      document.getElementById('chargement').style.display = 'none';
    }else{
      showError ('Merci de vérifier votre saisie');
    }
  }
  
  
  document.getElementById('button').addEventListener('change',function (e) {
    var choix = this.value;
    calculResultats(choix);
  });


function showError(error){
    
     document.getElementById('resultats').style.display = 'none';
    
     document.getElementById('chargement').style.display = 'none';

    const errorDiv = document.createElement('div');
    

    
    const card = document.querySelector('.card')
    
    const heading = document.querySelector('.heading');

    
    errorDiv.className = 'alert alert-danger';
    

    
    errorDiv.appendChild(document.createTextNode(error));
    

    
    card.insertBefore(errorDiv,heading);
    

    
    setTimeout(clearError,3000);
}


function clearError(error){
    
    document.querySelector('.alert').remove();
}


Merci pour ton aide.
0
Réponse 9 / 10
jordane45 Messages postés 38480 Date d'inscription   Statut Modérateur Dernière intervention   4 746
  
 document.getElementById('formulaire').addEventListener('submit',function(e){
    document.getElementById('resultats').style.display = 'none';   
    document.getElementById('chargement').style.display = 'block';
    setTimeout(calculResultats,2000);
    e.preventDefault();  
  });

  function calculResultats(){
    var convertisseur = document.getElementById('convertisseur');
    var euro = document.getElementById('euro');
    var convertDevise = parseFloat(convertisseur.value);
    var choice = document.getElementById('liste').value;
    console.log(choice);
    if (choice == 0) {
      euro.value = (convertDevise * 0.88).toFixed(2);
      document.getElementById('resultats').style.display = 'block';
      document.getElementById('chargement').style.display = 'none';
    } else if (choice == 1) {
      euro.value = (convertDevise * 1.11).toFixed(2);
      document.getElementById('resultats').style.display = 'block';
      document.getElementById('chargement').style.display = 'none';
    } else if (choice == 2) {
      euro.value = (convertDevise * 0.01).toFixed(2);
      document.getElementById('resultats').style.display = 'block';
      document.getElementById('chargement').style.display = 'none';
    }else{
      showError ('Merci de vérifier votre saisie');
    }
  }
0
Réponse 10 / 10
GanBoy_7575 Messages postés 8 Date d'inscription   Statut Membre Dernière intervention  
 
C'est parfait!! Merci beaucoup pour ton aide.
0

Discussions similaires

convertir une note sur 10
maeva9700 -
durock -

4 réponses
qui connais un convertisseur YouTube MP3
Utilisateur anonyme -
Paco -

4 réponses