Sujet Précédent Sujet Suivant

Calcul sur JavaScript

Résolu/Fermé
davidboring - 25 janv. 2011 à 16:39
 davidboring - 26 janv. 2011 à 12:59
Bonjour,

Je fais actuellement un site web et j'aurais besoin de vos connaissances sur javascript pour pouvoir réaliser un petit calcul. En fait, je voudrais que le script puisse calculer le prix en fonction du nombre de kilomètres. La difficulté est qu'il y a tout d'abord un choix à faire entre deux boutons radio, puis encore un autre choix entre deux boutons radio et après l'insertion du nombre de kilomètres pour finir par le calcul.

Premier choix : Semaine ou Dimanche et jours fériés
Deuxième choix : Jour ou nuit

Si semaine est choisi, le calcul se fera par rapport à 3.20 CHF le km
Si Dimanche et jours fériés est choisi, le calcul se fera par rapport à 3.60 CHF le km

Si Jour est choisi, prise en charge de 5 CHF
Si nuit est choisi, prise en charge de 15 CHF

Voilà, est ce qu'il est possible de réaliser ce script et si oui, comment faut-il s'y prendre ?

Merci d'avance de votre aide
A voir également:

9 réponses

Réponse 1 / 9
Mihawk Messages postés 4315 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 846
25 janv. 2011 à 17:44
Hello,

Je ne peux pas tout faire pour toi, mais tu auras besoin des choses suivantes.

Déjà, repérer tes cases via des id, puis l'utilisation de document.getElementById. Tu dois alors avoir une fonction maCase.isChecked ou quelque chose comme ça.
En fonction de ça, tu récupères les deux valeurs des cases sélectionnées.

Ensuite tu récupères le nombre de kilomètre avec un truc du genre monInputKm.value.

Enfin, tu fais ton calcul avec tes trois variables.

C'est pas très clair je sais, mais c'est un indice plus qu'autre chose. Essaye de faire quelque chose, poste le et je te corrigerai :-)
1
Réponse 2 / 9
Bilow Messages postés 1014 Date d'inscription samedi 21 août 2010 Statut Membre Dernière intervention 2 août 2015 117
25 janv. 2011 à 20:16
Salut !

Tu commences par initialiser le coût du carburant, ainsi que la valeur finale :
var carburant, cout;

Ensuite, tu vérifies si les cases sont cochées :
function testerRadio(radio) {
for (var i=0; i<radio.length;i++) {
if (radio[i].checked) {
return radio[i].value
}
}
}
Là, je n'ai pas compris ton système. Peux-tu nous rédiger une liste complète :
Si : semaine, jour alors cout carburant =
Si : férié, nuit alors cout carburant =
...

A partir de cela on pourra construire le système.

On récupèreras par après la distance, pour calculer le prix.
Bye ;)
1
Réponse 3 / 9
davidboring
25 janv. 2011 à 20:19
Merci pour ta réponse, pour l'instant, je n'ai que fait la fonction afficher lorsqu'on entre le nombre de kilomètres, je ne sais pas comment récupérer la valeur de mes boutons radio. Voilà la code : 

<!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>

<SCRIPT LANGUAGE="javascript">

function afficher(calcul) { 
var mult=document.calcul.kilometres.value;
document.calcul.tarif.value=mult
} 
</SCRIPT>

</head>
<body>
<form name="calcul">
  <p>
    <label>
      <input type="radio" name="jour" value="3.20" id="semaine" />
      Semaine</label>
    <br />
    <label>
      <input type="radio" name="jour" value="3.60" id="dimanche" />
      Dimanche</label>
  </p>
  <p>
    <label>
      <input type="radio" name="heure" value="5" id="jour" />
      Jour</label>
    <br />
    <label>
      <input type="radio" name="heure" value="15" id="nuit" />
      Nuit</label>
  </p>
  <p>
    <label for="kilometres">Nombre de kilometres</label>
    <input type="text" value="" name="kilometres" id="kilometres" />
  </p>
  <p>
    <label for="tarif">Tarif</label>
    <input type="text" value="" name="tarif" id="tarif" />
  </p>
  <p>
    <input type="button" name="calculer" id="calculer" value="Calculer"  onClick="afficher(calcul)" />
  </p>
  <p>
    <input type="reset" name="effacer" id="effacer" value="Effacer" />
    <br />
  </p>
</form>
</body>
</html>


J'essaie de trouver un code qui me permettra de récupérer les valeurs, avec une boucle apparamment mais je galère pas mal ;( En tout cas merci de ton aide, je vais essayer de voir les fonctions que tu m'as données !
0
Réponse 4 / 9
davidboring
25 janv. 2011 à 21:15
En fait il suffirait maintenant de faire :

( Value semaine OU dimanche * Value kilometres ) + Value jour OU nuit

Mais je ne vois pas trop comment faire pour l'instant...
0

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

Posez votre question
Réponse 5 / 9
Mihawk Messages postés 4315 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 846
25 janv. 2011 à 21:19
Allez, je ne maitrise pas les radiobuttons mais ça serait genre :

var tarif= (document.getElementById("semaine").checked == true) ? 3.20 : 3.60 ;
var km= document.getElementById("kilometres").value;
var periode = (document.getElementById("jour").checked == true) ? 5 : 15 ;

var resultat = (tarif*km)+periode ;
return resultat;

0
Bilow Messages postés 1014 Date d'inscription samedi 21 août 2010 Statut Membre Dernière intervention 2 août 2015 117
25 janv. 2011 à 21:50
Salut,
- km est une chaîne. Il faut le convertir en entier avec parseInt.
- Bravo d'avoir le réflexe de mettre des points au lieu des virgules, je me trompe tout le temps :S
- condition == true ; Tu n'est pas obligé de comparer. if(condition) tout court.
- Les conditions ternaires, c'est bien mais pour un débutant, ne vaudrait-il pas mieux de rester avec les if et else ?
- return resultat ; Il retourne dans quoi ? Je doute que davidboring puisse interpréter correctement ceci.
Je dis tout cela pour que les gens progressent ;)
0
Mihawk Messages postés 4315 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 846
26 janv. 2011 à 09:09
Tu as raison, mais tout faire à leur place ne les aide pas non plus ;-)
0
Bilow Messages postés 1014 Date d'inscription samedi 21 août 2010 Statut Membre Dernière intervention 2 août 2015 117
26 janv. 2011 à 12:45
C'est vrai !
0
Réponse 6 / 9
Bilow Messages postés 1014 Date d'inscription samedi 21 août 2010 Statut Membre Dernière intervention 2 août 2015 117
25 janv. 2011 à 21:46
Voilà, j'ai terminé le code. Je l'ai posté ci-dessous. Maintenant je veux que tu me dises (déjà s'il fonctionne !), ensuite chaque point, un à un, que tu n'as pas compris. On est là pour expliquer, pas pour doner des codes, alors pose toutes tes questions sur ce code.

Bye ;) 

<html>
<head>
<title>Carburant</title>
<script type="text/javascript">
function testerRadio(radio){ 
for (var i=0; i<radio.length;i++) { 
if (radio[i].checked) { 
return radio[i].value 
} 
} 
} 
function calculer(){
var nmb_km = document.nom_formulaire.nombre_km.value;
// On le convertit en entier
nmb_km = parseInt(nmb_km);
var texte_ferie = testerRadio(document.nom_formulaire.ferie);
var texte_journuit = testerRadio(document.nom_formulaire.journuit);
var ferie, jour;
if(texte_ferie == "semaine"){
ferie = 3.2 ;
}
else if(texte_ferie == "ferie"){
ferie = 3.6 ;
}
else{
alert("Veuillez remplir toutes les cases !");
return;
}

if(texte_journuit == "jour"){
jour = 5;
}
else if(texte_journuit == "nuit"){
jour = 15;
}
else{
alert("Veuillez remplir toutes les cases !");
return;
}
// Maintenant, on a tout !
var total = ( ferie * nmb_km ) + jour;
alert("Ce trajet vous coutera "+total+" CHF");
// Script réalisé par Bilow ! :D
}
</script>
</head>
<body>

<form name="nom_formulaire" onsubmit="calculer(); return false">
<p>Semaine ou dimanche/férié :<br>
<input type="radio" name="ferie" value="semaine">Semaine<br>
<input type="radio" name="ferie" value="ferie">Dimanche ou férié</p>

<p>Jour ou nuit : :<br>
<input type="radio" name="journuit" value="jour">Jour<br>
<input type="radio" name="journuit" value="nuit">Nuit</p>

<p>Nombre de kilomètres :<br>
<input type="text" name="nombre_km"></p>

<p><input type="submit" value="Tester"></p>

</body>
</html>
0
Réponse 7 / 9
davidboring
25 janv. 2011 à 21:57
Parfait, merci infiniment pour ton aide, je vais essayer maintenant de rajouter quelque chose pour me rajouter un arrondi à 2 chiffres après la virgule pour le résultat final et aussi pour qu'il y ait un message d'erreur lorsque le nombre de kilomètres n'est pas rempli. Merci encore pour ton aide je devrais pouvoir me débrouiller la prochaine fois, j'espère
0
Réponse 8 / 9
Bilow Messages postés 1014 Date d'inscription samedi 21 août 2010 Statut Membre Dernière intervention 2 août 2015 117
25 janv. 2011 à 22:37
De rien ;)

Tu as vraiment compris le code ?
Pour les nombres décimaux dans le nombre de kilomètre, il faudra supprimer parseInt() et trouver autre chose. Et si le champ est vide, ... bonne chance !

Bye ;)
0
Réponse 9 / 9
davidboring
26 janv. 2011 à 12:59
Voilà le code comme je l'ai modifié si ça vous intéresse. Encore une fois merci de votre aide car je ne sais pas si j'aurais réussi tout seul ;) 

<!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>

<script type="text/javascript">
// Fonction test
function testradio(radio){ 
for (var i=0; i<radio.length;i++) { 
if (radio[i].checked) { 
return radio[i].value 
} 
} 
} 
// Fonction afficher
function afficher(){
var km = document.calcul.kilometres.value;
var p = testradio(document.calcul.periode);
var h = testradio(document.calcul.heure);
// Kilomètres vide
if (document.calcul.kilometres.value == "")
{
alert("Veuillez indiquer le nombre de kilomètres.")
document.calcul.kilometres.focus()
return false
}
// Première condition
if(p == "semaine"){
periode = 3.20;
}
else if(p == "dimanche"){
periode = 3.60;
}
else{
alert("Veuillez cocher les cases qui correspondent à votre recherche.");
return false;
}
// Deuxième condition
if(h == "jour"){
heure = 5;
}
else if(h == "nuit"){
heure = 15;
}
else{
alert("Veuillez cocher les cases qui correspondent à votre recherche.");
return false;
}
// Calcul
var total = ( periode * km ) + heure;
var totalarr = Math.round(total*100)/100;
document.calcul.tarif.value=(""+totalarr+" CHF")
}
</script>

</head>
<body>
<form name="calcul">
  <p>
    <label>
      <input type="radio" name="periode" value="semaine" id="semaine" />
      Semaine</label>
    <br />
    <label>
      <input type="radio" name="periode" value="dimanche" id="dimanche" />
      Dimanche</label>
  </p>
  <p>
    <label>
      <input type="radio" name="heure" value="jour" id="jour" />
      Jour</label>
    <br />
    <label>
      <input type="radio" name="heure" value="nuit" id="nuit" />
      Nuit</label>
  </p>
  <p>
    <label for="kilometres">Nombre de kilometres</label>
    <input type="text" value="" name="kilometres" id="kilometres" />
  </p>
  <p>
    <label for="tarif">Tarif</label>
    <input type="text" value="" name="tarif" id="tarif" />
  </p>
  <p>
    <input type="button" name="calculer" id="calculer" value="Calculer"  onClick="afficher()" />
  </p>
  <p>
    <input type="reset" name="effacer" id="effacer" value="Effacer" />
    <br />
  </p>
</form>
</body>
</html>
0

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses