J'essaie de saisir un utilisateur une ville dans la barre de recherche et de cliquer sur Rechercher pour avoir l'affichage des informations pour la ville des utilisateurs. Actuellement, j'ai la ville durement codée mais je veux faire le choix des utilisateurs.
Codepen link = HTTPS: / /codepen.io/joshdbushnell/pen/mnegpy
JavaScript
3 Réponses :
Vous pouvez enregistrer un événement de clic avec le bouton de recherche qui obtient le texte de #searchbar , puis la recherche.
Vous pouvez ajouter une fonction onclick code> à votre bouton en le trouvant par ID code> qui met à jour la variable Ville code> à l'aide de la valeur de la barre de recherche lorsque le Le bouton est cliqué sur: document.getElementById("searchBar").addEventListener("keydown", function(event)
{
if (event.key === "Enter") //Can also use event.which === 13 or event.keyCode === 13
{
event.preventDefault();
var city = getElementById("searchBar").value;
}
});
Étant donné que vous utilisez jQuery, vous pouvez obtenir tout ce que les entrées utilisateur dans la barre de recherche comme ce code se tient, il ne fera toujours rien. Vous auriez besoin d'envelopper tout votre JavaScript à l'intérieur d'une jquery.click, donc lorsque l'utilisateur clique sur la recherche, elle effectuera les actions. P> $("#submit").click(function (e){
e.preventDefault();
var url = "https://api.openweathermap.org/data/2.5/weather?q=";
var city = $("#searchBar").val();
var units = "&units=imperial";
var key = "&&apikey=c6c565397f8f456020e7b3fe71fa3ff5";
$.getJSON(url + city + units + key, function(data){
//console.log(data);
var icon = "http://openweathermap.org/img/w/" + data.weather[0].icon + ".png";
var temp = Math.floor(data.main.temp);
var weather = data.weather[0].main;
$(".icon").attr("src", icon);
$(".weather").append(weather);
$(".temp").append(temp).append('°');
});
});