Sujet Précédent Sujet Suivant

Convertisseur

Résolu/Fermé
GanBoy_7575 Messages postés 8 Date d'inscription jeudi 9 juillet 2020 Statut Membre Dernière intervention 9 juillet 2020 - 9 juil. 2020 à 08:34
GanBoy_7575 Messages postés 8 Date d'inscription jeudi 9 juillet 2020 Statut Membre Dernière intervention 9 juillet 2020 - 9 juil. 2020 à 16:57
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 22774 Date d'inscription lundi 9 juin 2008 Statut Contributeur Dernière intervention 10 mai 2024 1 481
9 juil. 2020 à 09:22
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 jeudi 9 juillet 2020 Statut Membre Dernière intervention 9 juillet 2020
9 juil. 2020 à 09:34
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 38171 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 10 mai 2024 4 663
9 juil. 2020 à 10:54
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 jeudi 9 juillet 2020 Statut Membre Dernière intervention 9 juillet 2020
9 juil. 2020 à 11:02
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 38171 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 10 mai 2024 4 663
9 juil. 2020 à 11:08
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 jeudi 9 juillet 2020 Statut Membre Dernière intervention 9 juillet 2020
9 juil. 2020 à 11:21
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 38171 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 10 mai 2024 4 663
9 juil. 2020 à 11:38
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 jeudi 9 juillet 2020 Statut Membre Dernière intervention 9 juillet 2020
9 juil. 2020 à 13:27
Que veut tu dire par l'enlever de la liste et le placer sur le bouton?
0
jordane45 Messages postés 38171 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 10 mai 2024 4 663
9 juil. 2020 à 13:36
Qu'est-ce qui, actuellement, déclenche la fonction calculResultats ?
0
Réponse 7 / 10
GanBoy_7575 Messages postés 8 Date d'inscription jeudi 9 juillet 2020 Statut Membre Dernière intervention 9 juillet 2020
9 juil. 2020 à 13:42
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 38171 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 10 mai 2024 4 663
9 juil. 2020 à 14:04
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 jeudi 9 juillet 2020 Statut Membre Dernière intervention 9 juillet 2020
9 juil. 2020 à 15:58
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 38171 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 10 mai 2024 4 663
9 juil. 2020 à 16:34 
 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 jeudi 9 juillet 2020 Statut Membre Dernière intervention 9 juillet 2020
9 juil. 2020 à 16:57
C'est parfait!! Merci beaucoup pour ton aide.
0

Discussions similaires

Convertir une note sur 20 .
zino44 -
rolala... -

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

4 réponses
Convertir musiques Youtube en MP3
RESTANQUE -
Delphineal -

7 réponses
conversion d'un salaire en euros en kilo euro
Sylvie -
pseudo -

4 réponses
Comment transformer une note sur 20
Reneemoura -
Raymond PENTIER -

10 réponses