11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
J'avais un formulaire où s’affichait séparément 3 résultats de 2 fonctions javascript. Mais il fallait cliquer 2 fois sur 2 boutons.
J’ai voulu simplifier la chose en associant les 2 fonctions js sur un seul bouton onclick qui afficherait les 3 résultats.
Cela fonctionne pour les 2 premiers résultats (1ère fonction "calculate" = distance et temps).
Pour le résultat de la 2ème fonction ("tarification" = prix), on l’aperçoit 1 seconde puis il disparait et ne s'affiche pas.
Auriez-vous, SVP, une idée du problème ?
Merci par avance et très bonne journée.
Evelyne31

Les fonctions :

function tarification(){
  var horaire = $("input[type='radio']:checked").val();
  var tps = $("#tps2").val();
  var dist = $("#dst2").val();
  var dist2 = $("#dst3").text();
  var nbrkm = (dist/1000);
  var nbrkm2 = (dist2/1000);
  tps = tps/60;
  prixcourse = 0;

  if(horaire == 1)
  {
    if(nbrkm > 0 && nbrkm < 10)
      prixcourse = 15;
    else if(nbrkm >= 10 && nbrkm < 100)
      prixcourse = nbrkm * 2;
    else if(nbrkm >= 100)
      prixcourse = nbrkm * 1.8;
  }
  else if(horaire == 2)
  {
    if(nbrkm > 0 && nbrkm < 10)
      prixcourse = 20;
    else if(nbrkm >= 10 && nbrkm < 100)
      prixcourse = nbrkm * 2.2;
        else if(nbrkm >= 100)
      prixcourse = nbrkm * 2;
  }

  if(nbrkm2 >=20) prixcourse += 10;

  $("#tarif").text(Math.round(prixcourse)+" euros");
  $("#tarif_hidden").val(Math.round(prixcourse));
}
/**
 * calcule l'itinéraire avec le DirectionsService de Google
 */
function calculate(){
  var origin      = $('#origin').val();
  var destination = $('#destination').val();
  if(origin && destination){
    var request = {
      origin      : origin,
      destination : destination,
      travelMode  : google.maps.DirectionsTravelMode.DRIVING
    }
    var directionsService = new google.maps.DirectionsService();
    directionsService.route(request, function(response, status){
      if(status == google.maps.DirectionsStatus.OK){
        setInfos(response);
      }
    });
  }
}


Le code pour l'affichage sur la page html :

      <p>Temps : <B><FONT size="4px" color="#800040"><span id="tps"></span>
        <input type="hidden" name="tps" id="tps2" /></B></FONT></p>
	  
      <p>Distance : <B><FONT size="4px" color="#800040"><span id="dst"></span>
        <input type="hidden" name="dst" id="dst2" />
        <span id="dst3" style="display:none"></span></B></FONT></p>
	  
        <p>Prix : <B><FONT size="4px" color="#800040"><span id="tarif"></span></p>
        <input type="hidden" name="tarif" id="tarif_hidden" /></B></FONT></p>
Bonjour,
Je vois que j'ai oublié de poster le code que j'ai mis pour associer les 2 fonctions. Peut-être est-ce pour cela que je n'ai pas de réponse ?
Je répare cet oubli en espérant une piste car je bloque vraiment là-dessus.
Merci par avance et bonne journée,
Evelyne 31

<input type="button" value="Calculer l'itinéraire" onclick="javascript:calculate();tarification();"></p>