Collins Orlando Collins Orlando - 9 months ago 25
Javascript Question

How do I automatically clear/reset the page upon next search?

I'm working on a simple program which displays the weather conditions of queried/searched places. All is well, though I'd like to know how to automatically reset/clear the DOM (or at least the relevant section displaying the results) and populate it with results of the new search. At the moment, it appends the results unless I clear them manually (clear button).

Rather than copy/paste the all the codes (HTML/CSS/JS-jQuery), I preferred having them at JSBin. So here is a link to the 'app', and thus the rest of the codes (HTML and CSS).

JS/jQuery Code

$(function() {
function showWeather() {
let $title = $("#station"),
$description = $("#description"),
$temperature = $("#temp"),
$chill = $("#chill"),
$wind = $("#wind"),
$humidity = $("#humidity"),
$units = $(".units").text(),
$apiPath1 = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22",
$query = $('input#city').val(),
$apiPath2 = "%2C%20ak%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys",
$url = $apiPath1 + $query + $apiPath2;

$("input#city").val("");

$.ajax({
type: "GET",
url: $url,
success: function(data) {
$title.append(`
<h3>${data.query.results.channel.item.title}</h3>
`)
$description.append(`
<p>${data.query.results.channel.item.condition.text}</p>
`)
$temperature.append(`
<h1><span id="temp1">${data.query.results.channel.item.condition.temp}</span> &deg;<span class="units">F</span></h1>
`)
$chill.append(`
<p>Feels like: <span id="temp2">${data.query.results.channel.wind.chill}</span> &deg;<span class="units">F</span></p>
`)
$wind.append(`
<p>Wind speed: ${data.query.results.channel.wind.direction} km/h; Wind direction: ${data.query.results.channel.wind.speed}</p>
`)
$humidity.append(`
<p>Humidity: ${data.query.results.channel.atmosphere.humidity} %</p>
`)
}
});
}
//Converting Fahrenheit to Celsius
function fahrToCels(F) {
return Math.round((5/9) * (F - 32));
}
//Converting Celsius to back to Fahrenheit
function celsToFahr(C) {
return Math.round((C * 9/5 + 32));
}

$("#submit").on("click", function() {
showWeather();
});

$("input#city").on("keypress", function(event) {
if (event.which === 13) {
showWeather();
}
});

$('#clear').on('click', function (event) {
event.preventDefault();
$('#station, #description, #temp, #chill, #wind, #humidity').empty('');
});

$("#tempUnits").on("click", function() {
let temp1 = Number($("#temp1").text());
temp2 = Number($("#temp2").text());

if ($(".units").html() === "C") {
$(this).html("Temperature in Celsius")
$("#temp1").html(celsToFahr(temp1));
$("#temp2").html(celsToFahr(temp2));
$(".units").html("F");
}
else {
$(this).html("Temperature in Fahrenheit")
$("#temp1").html(fahrToCels(temp1));
$("#temp2").html(fahrToCels(temp2));
$(".units").html("C");
}
});
});


Cheers!

Answer Source

Try using html instead of append

$.ajax({
  type: "GET", 
  url: $url,
  success: function(data) {
    $title.html(`
      <h3>${data.query.results.channel.item.title}</h3>
    `)
    $description.html(`
      <p>${data.query.results.channel.item.condition.text}</p>
    `)
    $temperature.html(`
      <h1><span id="temp1">${data.query.results.channel.item.condition.temp}</span> &deg;<span class="units">F</span></h1>
    `)
    $chill.html(`
      <p>Feels like: <span id="temp2">${data.query.results.channel.wind.chill}</span> &deg;<span class="units">F</span></p>
    `)
    $wind.html(`
      <p>Wind speed: ${data.query.results.channel.wind.direction} km/h; Wind direction: ${data.query.results.channel.wind.speed}</p>             
    `)
    $humidity.html(`
      <p>Humidity: ${data.query.results.channel.atmosphere.humidity} %</p>    
    `)
  }
});