Calcul sur JavaScript [Résolu/Fermé]

Signaler
-
 davidboring -
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

9 réponses

Messages postés
4310
Date d'inscription
mercredi 29 mars 2006
Statut
Contributeur
Dernière intervention
6 janvier 2015
765
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
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 60511 internautes nous ont dit merci ce mois-ci

Messages postés
1022
Date d'inscription
samedi 21 août 2010
Statut
Membre
Dernière intervention
2 août 2015
113
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
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 60511 internautes nous ont dit merci ce mois-ci

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 !
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...
Messages postés
4310
Date d'inscription
mercredi 29 mars 2006
Statut
Contributeur
Dernière intervention
6 janvier 2015
765
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;

Messages postés
1022
Date d'inscription
samedi 21 août 2010
Statut
Membre
Dernière intervention
2 août 2015
113
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 ;)
Messages postés
4310
Date d'inscription
mercredi 29 mars 2006
Statut
Contributeur
Dernière intervention
6 janvier 2015
765
Tu as raison, mais tout faire à leur place ne les aide pas non plus ;-)
Messages postés
1022
Date d'inscription
samedi 21 août 2010
Statut
Membre
Dernière intervention
2 août 2015
113
C'est vrai !
Messages postés
1022
Date d'inscription
samedi 21 août 2010
Statut
Membre
Dernière intervention
2 août 2015
113
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>
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
Messages postés
1022
Date d'inscription
samedi 21 août 2010
Statut
Membre
Dernière intervention
2 août 2015
113
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 ;)
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>