Je travaille sur un projet simple en JS qui appelle les données d'une API et revient à une page. Il existe également un bouton "Réinitialiser" qui devrait réinitialiser l'appel de l'API à la ligne de base. J'ai du mal à comprendre comment réinitialiser les éléments. Habituellement, je le ferais avec des classes CSS, mais cette fois-ci, je vais construire une affectation plus importante qui appellera des API à partir d'ID utilisateur. J'aimerais donc le faire uniquement via JS/jQuery et sans utiliser d'élément de formulaire.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Weather Vain</title>
</head>
<h1> Weather 4 Ever </h1>
<body class = "change">
  <p class="prompt">Type in a US city to get temperature data!</p>
  <form class="pure-form">
    <input type="text" class="pure-input-rounded">
    <button type="submit" class="pure-button">Search</button>
    <button type="submit" class="reset-button">Reset</button>
  </form>

  <p id="forecast"></p>

  <p class="date"></p>
</body>
</html>

CSS

html, body {
  background-color: #5CBF94;
  font-weight: 100;
  color: #FFF;
}

h1, h2, h3, h4, h5, h6, p {
  text-align: center;
  font-weight: 100;
  width: 100%;
}

h1 {
  font-size: 3em;
}

.prompt {
  font-size: 1.2em;
  margin-top: 4em;
}

form {
  color: #000;
  width: 290px;
  margin: 0 auto;
}

.date {
  position: absolute;
  bottom: 0;
  text-align: center;
}

img {
  margin: 0 auto;
}

JS

console.log("Script loaded")
"use strict";

(function() {
    $('.pure-button').click(function(e) {
        e.preventDefault()
        console.log("click noticed")
    $.ajax({
        url: "https://api.openweathermap.org/data/2.5/weather?q=" + $('.pure-input-rounded').val() + ",US&appid=6549863730776a52fadf3fe935d5eecc&units=Imperial",
        type: "GET",
        success: function(data){
            var temp = data.main.temp
            var sky = data.weather[0].description
            $('#forecast').text("The current temperature in " + $('.pure-input-rounded').val() + " is " + temp + " degrees Fahrenheit. It is currently " + sky + "."  )

        }

    })
})

  (".reset-button").onclick.reset() //this is the part that I need to figure out.

})();

Lien vers CodePen : https://codepen.io/anfperez/pen/NJzPoE

Quelqu'un peut-il me donner des indications?

2
Leia_Organa 18 mars 2019 à 00:17

2 réponses

Meilleure réponse

Afin de supprimer la valeur d'entrée, vous pouvez dans Jquery utiliser la fonction .val et donnez-lui un paramètre de ''.

De plus, pour les performances, il est préférable de stocker les éléments Jquery dans des variables afin que vous n'ayez pas à utiliser Jquery pour les trouver à chaque fois que vous effectuez une action (comme un clic)

console.log("Script loaded")
"use strict";

(function() {
  var $inputElement = $('.pure-input-rounded');
  var $forecastElement = $('#forecast');

  $('.pure-button').click(function(e) {
    e.preventDefault()
    console.log("click noticed")
    $.ajax({
      // var city = $('.pure-input-rounded').val()
      url: "https://api.openweathermap.org/data/2.5/weather?q=" + $inputElement.val() + ",US&appid=6549863730776a52fadf3fe935d5eecc&units=Imperial",
      type: "GET",
      success: function(data) {
        console.log(data)
        var temp = data.main.temp
        var sky = data.weather[0].description
        $forecastElement.text("The current temperature in " + $('.pure-input-rounded').val() + " is " + temp + " degrees Fahrenheit. It is currently " + sky + ".")

      }

    })
  })

  $(".reset-button").click(function() {
    $inputElement.val('');
  })

})();
html,
body {
  background-color: #5CBF94;
  font-weight: 100;
  color: #FFF;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  text-align: center;
  font-weight: 100;
  width: 100%;
}

h1 {
  font-size: 3em;
}

.prompt {
  font-size: 1.2em;
  margin-top: 4em;
}

form {
  color: #000;
  width: 290px;
  margin: 0 auto;
}

.date {
  position: absolute;
  bottom: 0;
  text-align: center;
}

img {
  margin: 0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Weather Vain</title>
</head>
<h1> Weather 4 Ever </h1>

<body class="change">
  <p class="prompt">Type in a US city to get temperature data!</p>
  <form class="pure-form" onsubmit="event.preventDefault();">
    <input type="text" class="pure-input-rounded">
    <button type="submit" class="pure-button">Search</button>
    <button type="button" class="reset-button">Reset</button>
  </form>

  <p id="forecast"></p>

  <p class="date"></p>
</body>

</html>
2
Sølve Tornøe 17 mars 2019 à 21:34

Pas besoin de coder quoi que ce soit.

Vous utilisez un formulaire, il vous suffit donc d'utiliser un bouton de réinitialisation.

Il s'agit d'une fonctionnalité HTML 1 de base :

<button type="reset" class="pure-button">Reset</button>

(function() {

$('.pure-form').submit(function(e) {
  e.preventDefault()
  console.log("click noticed")
	$.ajax({
		// var city = $('.pure-input-rounded').val()
		url: "https://api.openweathermap.org/data/2.5/weather?q=" + $('.pure-input-rounded').val() + ",US&appid=6549863730776a52fadf3fe935d5eecc&units=Imperial",
		type: "GET",
		success: function(data){
			console.log(data)

      $('#forecast').text(`The current temperature in ${data.name} is ${data.main.temp} degrees Fahrenheit. It is currently ${data.weather[0].description}`)
		}

	})
})

$('.pure-form').on('reset', function(e) {
  $('#forecast').text('');
})

})();

// this is useless => (".reset-button").onclick("reset") 
html, body {
  background-color: #5CBF94;
  font-weight: 100;
  color: #FFF;
}
h1, h2, h3, h4, h5, h6, p {
  text-align: center;
  font-weight: 100;
  width: 100%;
}
h1 {
  font-size: 3em;
}
.prompt {
  font-size: 1.2em;
  margin-top: 4em;
}
form {
  color: #000;
  width: 290px;
  margin: 0 auto;
}
.date {
  position: absolute;
  bottom: 0;
  text-align: center;
}
img {
  margin: 0 auto;
}

input { background-color: #FFF }
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1> Weather 4 Ever </h1>
<p class="prompt">Type in a US city to get temperature data!</p>
<form class="pure-form">
  <fieldset>
    <input id="input-city" type="text" class="pure-input-rounded"   placeholder="Enter city name here..." /> 

  </fieldset>
  <button type="submit" class="pure-button">Search</button>
  <button type="reset" class="pure-button">Reset</button>
</form>

<p id="forecast"></p>
1
Mister Jojo 20 mars 2019 à 20:56