Vous pouvez voir ce que je veux dire ici

Ce que je veux réaliser, c'est que le nombre reste en Fahrenheit jusqu'à ce que je clique à nouveau sur le bouton de commutation.

Mon code JS:

$.getJSON("https://fcc-weather-api.glitch.me/api/current?lat=&lon=", function(json){
  var temp = json.main.temp;
  var ftemp = (temp * 1.8) + 32
  var celsius = true;
  $(document).ready(function() {
    $("#temperature").html(temp);
    $("#button").on("click", function(){
    celsius = !celsius;
    if (celsius)
      {
        $("#temperature").html(temp);
      }
    else
      {
        $("#temperature").html(ftemp);
        $("#button").html("F");
      }
  })
  })
});
-1
merkur0 11 avril 2018 à 15:14

3 réponses

Meilleure réponse

Vous l'avez omis dans votre question, mais votre "bouton" est en fait une ancre.

<a id="button" href="">C</a>

Puisqu'il n'y a pas href, il reviendra par défaut à la page actuelle et la rafraîchira.

Vous devez donc éviter cela, en faisant cela dans votre gestionnaire d'événements click:

$("#button").on("click", function(event){
    event.preventDefault(); // <-- will stop the page from refreshing
1
Phiter 11 avril 2018 à 12:19

Votre <a> provoque le rechargement de la page lorsque vous cliquez dessus.

Utilisez preventDefult pour éviter ce problème:

$.getJSON("https://fcc-weather-api.glitch.me/api/current?lat=&lon=", function(json) {
  var temp = json.main.temp;
  var ftemp = (temp * 1.8) + 32
  var celsius = true;
  $(document).ready(function() {
    $("#temperature").html(temp);
    $("#button").on("click", function(e) {
      e.preventDefault();  // <-- here
      celsius = !celsius;
      if (celsius) {
        $("#temperature").html(temp);
      } else {
        $("#temperature").html(ftemp);
        $("#button").html("F");
      }
    })
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
  <h1>Local Weather App</h1>
  <div id="data">
    <div id="temperature">

    </div>
    <a id="button" href="">C</a>
  </div>
</center>
1
JLRishe 11 avril 2018 à 12:19

Vous devez supprimer l'attribut href de votre élément a:

$.getJSON("https://fcc-weather-api.glitch.me/api/current?lat=&lon=", function(json){
  var temp = json.main.temp;
  var ftemp = (temp * 1.8) + 32
  var celsius = true;
  $(document).ready(function() {
    $("#temperature").html(temp);
    $("#button").on("click", function(){
    celsius = !celsius;
    if (celsius)
      {
        $("#temperature").html(temp);
      }
    else
      {
        $("#temperature").html(ftemp);
        $("#button").html("F");
      }
  })
  })
});
<center>
<h1>Local Weather App</h1>
<div id = "data">
  <div id ="temperature">
  </div>
  <a id="button">C</a>
</div>  
</center>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
0
Andrzej Smyk 11 avril 2018 à 12:20