Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Non-Officiels > Site Web > Javascript > Apprenez le Javascript ! > Intermédiaire > TP : Créez un convertisseur € / F > Lecture des commentaires

TP : Créez un convertisseur € / F

Vous devez être inscrit pour pouvoir poster des messages

Page : 1 
Pseudo Commentaire
Page : 1 
Hors ligne Harvis # Posté le 28/12/2006 à 01:44:55 - Ce membre n'a pas mis de note
Avatar
Groupe : Membres
 Il aurait été mieux de ne pas générer le formulaire en javascript, comme ça, ceux qui l'ont désactivé peuvent quand même convertir leurs monnaies (en fournissant également une version PHP qui a l'inconvénient de recharger la page). Bon, ok, c'est un tutoriel sur le javascript, mais c'est bien d'y penser quand même un peu ;) .

Voici un exemple:

Code : HTML
<h1>Convertisseur de monnaies</h1>
<form method="post" action="" onsubmit="javascript:convertir();return false">
        <div>
                <label for="valeur">Valeur à convertir</label>
                <input type="text" name="valeur" id="valeur" />
        </div>
        <div>
                <input type="radio" name="monnaie" value="francs" id="francs" />
                <label for="francs">En francs</label>
        </div>
        <div>
                <input type="radio" name="monnaie" value="euros" id="euros" />
                <label for="euros">En euros</label>
        </div>
        <input type="submit" value="Convertir" />
</form>


Code : JavaScript
document.write('<p id="resultat"></p>');
function convertir()
{
        var valeur = document.getElementById('valeur').value;
        if (!isNaN(valeur) && valeur != '') /* Si la valeur entrée est un nombre non nul */
        {
                var francs = document.getElementById('francs').checked;
                var euros = document.getElementById('euros').checked;
                if (francs == true) /* Si on veut convertir en francs */
                {
                        var resultat = valeur * 6.55957;
                        document.getElementById('resultat').innerHTML = valeur+' euros donne <strong>'+resultat+' francs</strong>.';
                }
                else if (euros == true) /* Si on veut convertir en euros */
                {
                        var resultat = valeur / 6.55957;
                        document.getElementById('resultat').innerHTML = valeur+' francs donne <strong>'+resultat+'euros</strong>.';
                }
                else /* Si on ne veut pas convertir */
                {
                        document.getElementById('resultat').innerHTML = 'Vous devez <em>sélectionner une monnaie</em>.';
                }
        }
        else /* Si la valeur entrée est nulle ou est un texte */
        {
                document.getElementById('resultat').innerHTML = 'Vous devez <em>entrer un nombre</em>.';
        }
}

(On ne se moque pas, c'est mon premier script.)

Si le javascript est activé, la fonction s'exécute, et le formulaire ne s'envoie pas. Mais si le cas inverse se produit, la fonction ne s'exécute cette fois pas et le formulaire est envoyé et traité en PHP.

Par contre, je me demandais: pourquoi est-ce que quand je tape dans le script le signe €, au final il me sort un un carré tout moche?

Sinon, c'était un bon TP. J'en tremble pour la suite...
Hors ligne ouck_02 # Posté le 26/01/2007 à 22:51:04 - Ce membre n'a pas mis de note
www.ouck.ch
Avatar
Groupe : Membres
 Salut, tout d'abord merci pour ton tuto qui est très bien, ensuite j'ai un petit problème avec ce TP ^^ .

Code : HTML
<script type="text/javascript">
               
                function EuroFrs(x)
                {
                        var y = x / 1,6;
                        return y;
                }
                function FrsEuro(x)
                {
                        var y = x * 1,6;
                        return y;
                }
               
                </script>
                <p><input type="text" id="saisie"/> à transformer en
                <em onMouseOver="javascript:this.style.color='red';" onMouseOut="javascript:this.style.color='black';" onClick="javascript:document.getElementById('resultat').innerHTML=FrsEuro(document.getElementById('saisie').value);">Euro</em>
                ou en
                <em onMouseOver="javascript:this.style.color='red';" onMouseOut="javascript:this.style.color='black';">Frs</em>
                </p>
                <p id="resultat"></p>

(Bon là c'est pas très claire parce que c'est plein de grandes lignes ^^ )

Voilà mon code, c'est plutôt différent de ta solution mais j'aimerais quand même arriver au bout de mon idée. Donc là je ne comprends pas pourquoi ça fonctionne pas o_O ...

C'est apparament cette ligne qui ne fonctionne pas :

Code : JavaScript
onClick="javascript:document.getElementById('resultat').innerHTML=FrsEuro(document.getElementById('saisie').value);"


Le problème est clairement le passage dans la fonction parce que si je met ça :
Code : JavaScript
onClick="javascript:document.getElementById('resultat').innerHTML=document.getElementById('saisie').value;"

Je vois bien le chiffre entré dans le paragraphe du dessous...

J'ai relus ton tuto tout me parait en règle mais ça ne fonctionne pas... J'imagine quoi je dois bien me compliquer en faisant comme ça (ou pas) mais j'aimerais vraiment compléter ce code .... Merci de ton aide ! :-°
Mon portfolio : www.ouck.ch :-°
 
Hors ligne Anonyme # Posté le 27/01/2007 à 19:40:24 - Ce membre n'a pas mis de note
Groupe :
Ah ouais, tu pouvais pas le savoir :p
Si tu ne comprends pas les mots que j'utilise, vas voir le dernier chapitre de la partie II du tuto


En fait quand tu récupère une valeur d'un champ ( comme tu l'a fait avec document.getElementById('resultat').innerHTML ), cette valeur est un string. Il faut que tu fasses une fonction qui puisse passer de string vers float ( un nombre quoi ). Heureusement, y'en a qui existent, les voici.
Code : JavaScript
ParseInt(string);
ParseFloat(string);

// Ou si ça marche pas
parseInt(string);
parseFloat(string);
Hors ligne ouck_02 # Posté le 27/01/2007 à 20:10:46 - Ce membre n'a pas mis de note
www.ouck.ch
Avatar
Groupe : Membres
 Un petit peu d'aide pour compléter ma ligne de code STP ^^ J'ai essayé mais j'arrive pas vraiment...
Mon portfolio : www.ouck.ch :-°
 
Hors ligne Anonyme # Posté le 29/01/2007 à 20:43:36 - Ce membre n'a pas mis de note
Groupe :
Je suis pas sûr que ça marche mais tu peux toujours essayer...
Enfin la prochaine fois si tu veux des réponses plus rapides il serait plus judicieux de poster sur le forum ( xhtml/css/js ). Il y aura surement quelqu'un pour te répondre rapidement ;)
Code : HTML
<script type="text/javascript">

function EuroFrs(x)
{
  var y = parseFloat(x) / 1,6;
  return y;
}

function FrsEuro(x)
{
  var y = parseFloat(x) * 1,6;
  return y;
}
               
</script>
<p><input type="text" id="saisie"/> à transformer en
<em onClick="javascript:document.getElementById('resultat').innerHTML = FrsEuro(document.getElementById('saisie').value);">Euro</em>
ou en
<em>Frs</em>
</p>
<p id="resultat"></p>
Hors ligne Wii Lee # Posté le 04/04/2007 à 10:33:43 - Ce membre n'a pas mis de note
Avatar
Groupe : Membres
 Personnellement, je n'y suis pas du tout arrivé, et j'ai tester la solution directement sur mon PC, mais ça ne marche pas non plus.
Je recrute pour mon site web sur l'univers de bleach ! Cliquez ici si vous êtes interessé.
Cliquez sur la bannière pour accéder directement au site :
Image utilisateur
 
Hors ligne maxterfike # Posté le 18/04/2007 à 19:15:12 - Ce membre a mis la note : 17
Avatar
Groupe : Membres
 Voici mon code, trés simple :
Code : JavaScript
<p>
<big>Convertisseur Francs ==> Euros :<br/></big>
<input id='saisie' type="text"
onKeyUp="javascript:document.getElementById('texte').innerHTML=
document.getElementById('saisie').value/6.55957 "/> F =<span id='texte' >0</span> €
</P>


<p>
<big>Convertisseur Euros ==> Francs : <br></big>
<input id="saisie2" onKeyUp="javascript:
document.getElementById('texte2').innerHTML=document.getElementById('saisie2').value*6.55957" />
€ = <span id="texte2" >0</span> F

</p>


A quoi bon se compliquer la vie alors qu'on peut faire simple !

17
Hors ligne dark.link # Posté le 24/06/2007 à 23:00:05 - Ce membre n'a pas mis de note
J'préfère pas en avoir :-°
Avatar
Groupe : Membres
 Héhé, moi j'ai pas du tout fait comme ça :

Code : JavaScript

<html>
<head>
<title>Bonjour</title>
<script type="text/javascript">
<!--
var resultat = 0;

function euro()
{
        var euro = prompt('Entrez la valeur en Euro');
        resultat = euro * 6.55957;
        alert(euro+' euros est egal a '+resultat+' francs');
}

function franc()
{
        var franc = prompt('Entrez la valeur en Franc');
        resultat = franc / 6.55957;
        alert(franc+' francs est egal a '+resultat+' euros');
}
//-->
</script>
</head>
<body>
Convertir <a href="" onclick="javascript:euro();">Euros</a> - <a href="" onclick="javascript:franc();">Francs</a>

</body>
</html>


:p
Hors ligne dark-link # Posté le 15/07/2007 à 13:55:37 - Ce membre a mis la note : 20
:o
Avatar
Groupe : Membres
 Moi j'ai fais un code qui affiche automatiquement la conversion. :D
Code : JavaScript

<script type="text/javascript">
function convertir()
{
var monnaie_euro = document.getElementById('euro').checked;
var monnaie_franc = document.getElementById('franc').checked;

var montant = document.getElementById('montant').value;
if (isNaN(montant))
{
document.getElementById('resultat').value = 'Vous n\'avez pas entré un nombre.';
}
else
{
var nombre = 6.55957;

if (monnaie_euro == true)
{
var conversion = montant * nombre;
document.getElementById('resultat').value = conversion;
}
else if (monnaie_franc == true)
{
var conversion = montant / nombre;
document.getElementById('resultat').value = conversion;
}
else
{
document.getElementById('resultat').value = 'Vous devez choisir un mode de conversion!';
}
}
}
</script>
Type de conversion:
<label><input type="radio" name="monnaie" id="euro" />Euro en francs</label><br/>
<label><input type="radio" name="monnaie" id="franc" />Francs en euro</label><br/>

<br /><br />

Montant:<input type="text" id="montant" onkeyup="javascript:convertir();" /><br />
Résultat:<input type="text" id="resultat" size="50" disabled="disabled" />
 


Super TP en tout cas. :) 20/20.
Image utilisateurImage utilisateur

Code : PHP
:p 
 
Hors ligne Slivo # Posté le 11/03/2008 à 16:41:50 - Ce membre n'a pas mis de note
Groupe : Membres
 Citation : Pas de titre
Personnellement, je n'y suis pas du tout arrivé, et j'ai tester la solution directement sur mon PC, mais ça ne marche pas non plus.


Meme probleme, rien ne fonctionne, ma premiere version, la version améliorée en utilisant la correction, la correction, et meme lien de correction, j'obtient une jolie page blanche.

Je suis le seul a rencontrer le soucis ?
Hors ligne stefff83 # Posté le 14/03/2008 à 09:27:07 - Ce membre n'a pas mis de note
Groupe : Membres
 Salut a tous !!

Oui en effet, apparement la correction ne fonctionne pas.
Lors de l'affichage la page reste blanche.

Serait-il possible de corriger ce problème ?

Merci a vous tous !

Ps : Super le site du zero !!!
Hors ligne dunedune # Posté le 06/07/2008 à 17:11:23 - Ce membre n'a pas mis de note
#include <cerveau.h>
Avatar
Groupe : Membres
 En effet, ça marche pas :(
Je n'ai aucune idée du pourquoi o_O
Code : JavaScript
1
2
3
4
5
function ajax(linge)
{
  linge.color = '#FFF';
  return WASHING_SUCCESS;
}
 
Hors ligne MrBricolage # Posté le 14/07/2008 à 11:23:43 - Ce membre a mis la note : 16
Groupe : Membres
 Les tutos sont bons, bien expliqués.

J'ai trouvé le tp un peu difficile par rapport aux petits exercices fait auparavent. Je n'ai pas réussi sans jeter un oeil à la correction.
Effectivement le copié/collé de la correction ne fonctionne pas. J'ai remarqué qu'en retirant tout le css, chez moi il fonctionnait!

Juste un conseil si je peux me permettre: le code css embrouille un peu la correction. Je pense que du aurais pu le retirer pour clarifier le code "brut"...

Je t'attribue un 16 pour cette page (je te mets 18 pour les precedente mais la j'ai vraiment ramé!).
Hors ligne xavierh # Posté le 29/08/2008 à 10:13:13 - Ce membre a mis la note : 19
Peace & Love !
Avatar
Groupe : Membres
 Moi non plus ca ne marche pas le copier/coller ni le lien de correction.
J'ai un zolie page blanche, ouaa, comme c'est puissant la javascript :waw:

PS: J'adore le javascript :p

Edit: Bon, j'ai bossé un peu est j'ai fais ca:

Code : HTML
 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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<html>
	<head>
		<script>
			<!--
			function convertion(types)
			{
				var entree = document.getElementById('nombre').value;
				var entree2 = document.getElementById('nombre3').value;
				var resultat;

				if(isNaN(entree))
				{
					resultat = 'Ce n\'est pas un nombre' ;
				}		
				else
				{
					switch(types)
					{
						case 1:
							resultat = entree * 6.55957;
							entree2 = '0';
						break;
						
						case 2:
							resultat = entree2 / 6.55957;
							entree = '0';
						break;
					}
				}
				document.getElementById('nombre2').value = resultat;
			}
			//-->
		</script>
		<style>
		<!--
		table
		{
		border: 3px solid gray;
		}
		.resultat td
		{
			border: 1px solid black;
		}
		//-->
		</style>
	</head>
	<body > 
		<table>
			<tr>
				<td><label for="nombre">?uros</label></td>
				<td><input type="text" id="nombre" size=100 onkeyup="convertion(1);"/><br /></td>
			</tr>
			<tr>
				<td><label for="nombre">Francs</label></td>
				<td><input type="text" id="nombre3" size=100 onkeyup="convertion(2);"/><br /></td>
			</tr>			
			<tr class="resultat">
				<td>Convertion</td>
				<td><input type="text" id="nombre2" size=100 disabled="disabled"/></td>
			</tr>
		</table>
		
	</body>
</html>


Vous pouvez tester il marche (si si je vous jure :D ).
Image utilisateur
Image utilisateurImage utilisateur
 
Hors ligne eric76 # Posté le 15/11/2008 à 23:54:44 - Ce membre n'a pas mis de note
Groupe : Membres
 je viens juste de débuter le javascript ...

un petit script simple pour convertir il n'est pas fini

mais grâce au site zéro j'ai capté un peu comment cela fonctionne

voilà ce que j'ai fait

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>

<body>
<script type="text/javascript">
function convertir() {
var valeur = document.getElementById('nombre').value;
if (isNaN(valeur) || valeur == '') {
document.write('Veuillez entrer une valeur svp :');
} else {
var argent = valeur*6.55957;
document.write('Résultats de la conversion :'+argent+' francs');
}
}
document.write('<form action="" method="post" name="monFormulaire">');
document.write('Entrez la valeur en euros, elle sera convertie en francs : ');
document.write('<input type="text" id="nombre" value="" maxlength="4" />');
document.write('<input type="button" name="valeur" value="Convertir en francs" onclick="javascript:convertir();" />');
document.write('<input type="reset" value="Effacer" />');
document.write('</form>');
</script>
</body>
</html>

je sais "il n'est pas fini"

donc merci à vous tous les gars pour votre taf !!! :p
Hors ligne mynfs # Posté hier à 01:05:06 - Ce membre n'a pas mis de note
Zéro à la puissance zéro
Avatar
Groupe : Membres
 Ben ce n'est pas si compliqué...
Code : JavaScript
1
2
Francs : <input type="text" id="francs" onkeyup="javascript:document.getElementById('euros').value=(this.value)*6.55957;" /><br />
Euros : <input type="text" id="euros" onkeyup="javascript:document.getElementById('francs').value=(this.value)/6.55957;" />

Deux champs qui se convertissent l'un et l'autre, pas de bouton inutile.

J'ai seulement commencé hier et c'est assez facile...
mynfs
Cliquez ici si vous n'avez rien à faire
Cliquez ici si vous aimeriez avoir quelque chose à faire
 

Vous devez être inscrit pour pouvoir poster des messages

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | RSS tutoriels | RSS news
Édité par Simple IT SARL : Nous contacter | Notre blog | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 434 Zéros connectés | Requêtes SQL 8 requêtes | Temps de génération de la page : Total (SQL) 0.0237s (0.0113s)