Réaliser un convertisseur euro

Version imprimable

Bonjour,

Alors voilà mon souci (qui à mon avis n'en sera pas un pour certain lol)....je m'arrache les cheveux pour arriver à faire fonctionner mon convertisseur euro / franc (et inversement) avec la saisi de la somme qui se calcule en direct.
J'ai donc utilisé la commande "keyup" ou "onkeyup" à partir de mon script JS mais y a rien à faire.
Je sais qu'il y a possibilité de rajouter la commande dans mon Html mais ça n'est pas le but recherché dans mon cours (formation par correspondance) d'après l'intitulé de l'exercice.

Quelqu'un peut il me dire ce qui ne va pas?

Merci par avance

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Créer un convertisseur</title>
    <link rel="stylesheet" href="style.css">
    <script src="exercice3.js"></script>
</head>
 
<body>
 
<form>
        <h1>Convertisseur d'euros/francs  et  francs/euros</h1>
    <div>
        <label for="euro"><h3>Résultat en euros</h3></label>
        <input type="text" id="eu" name="euro" placeholder="Entrez la somme en euro">
    </div> 
        <label for="franc"><h3>Résultat en francs</h3></label>
        <input type="text" id="fr" name="franc" placeholder="Entrez la somme en franc" >
</form>
 
</body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
valeuro= 6.55957;
function convertF(){
  var franc = document.getElementById("fr").value;
  if (isNaN(franc)){
    alert ("Veuillez saisir une valeur numérique svp !!");
    franc = 0;
  }
  else{
  franc = parseFloat(franc);
  var euro = franc/valeuro;
  euro = Math.round(euro*100)/100;
  document.getElementById("eu").innerHTML = euro;
  }
}
 
 
function convertE(){
  var euro = document.getElementById("eu").value;
  if (isNaN(euro)){
    alert ("Veuillez saisir une valeur numérique svp !!");
    euro = 0;
  }
  else{
  euro = parseFloat(euro);
  var franc = euro*valeuro;
  franc = Math.round(franc*100)/100;
  document.getElementById("fr").innerHTML = franc;
  }
}
 
window.addEventListener("load",function(){
  document.getElementById("eu").addEventListener("onkeyup", convertF);
  document.getElementById("fr").addEventListener("onkeyup", convertE);
})

Bonjour,

1- c'est "keyup".

2- Autre solution : https://codepen.io/jreaux62/pen/GRJVwVb

Code:

1
2
3
4
5
6
7
8
9
10
 <h1>Convertisseur Euros - Francs</h1>
  <div style="display:inline-block; text-align:center;">
    <label for="deviseeu"><b>Euros</b></label><br />
    <input id="deviseeu" type="number" step="0.01" name="euro" placeholder="Somme en Euros" />
  </div>
  <span>< ></span>
  <div style="display:inline-block; text-align:center;">
    <label for="devisefr"><b>Francs</b></label><br />
    <input id="devisefr" type="number" step="0.01" name="franc" placeholder="Somme en Francs" />
  </div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
"use strict";
window.addEventListener("DOMContentLoaded", (event) => {
  const change = 6.55957;
  const devisefr = document.getElementById('devisefr');
  const deviseeu = document.getElementById('deviseeu');
 
  devisefr.addEventListener('keyup', function(){
    let franc = parseFloat(this.value.trim());
    let euro = parseFloat(franc/change);
    //devisefr.value = franc.toFixed(2);
    deviseeu.value = euro.toFixed(2);
  });
 
  deviseeu.addEventListener('keyup', function(){
    let euro = parseFloat(this.value.trim());
    let franc = parseFloat(euro*change);
    devisefr.value = franc.toFixed(2);
    //deviseeu.value = euro.toFixed(2);
  });
});

07/04/2020, 15h34
Chrisquicks

Merci

Merci beaucoup, c'est parfait :D
07/04/2020, 18h07
javatwister

J'approuve aussi!

Je remplacerais même keyup par input pour une interaction plus entière souris / clavier (là, ce n'est pas trop gourmand);