I'm creating a simple practice weather page where you get weather data for a particular city.
Currently when I enter a city it displays the data by creating ul/li elements, but when I enter a second city instead of replacing and updating the existing elements, it just adds the data for the second city under the first city.
window.onload = function() {
let cityName = document.querySelector("#city");
let button = document.querySelector("#submit");
// Checks value type and displays property and value.
let logLi = function(k, j) {
if (typeof j === 'object') {
isObject(j);
} else {
let li = document.createElement('LI');
let liText = document.createTextNode('\u00A0\u00A0\u00A0\u00A0' + k + ": " + j);
li.appendChild(liText)
document.querySelector('body').appendChild(li);
}
}
// Checks Object's name type, and displays name of object or Array
let logUl = function(x) {
if (isNaN(x)) {
let output = document.createElement('UL');
let outputText = document.createTextNode(x);
output.appendChild(outputText);
document.querySelector('body').appendChild(output);
}
}
// Calls logLi on every value in object
let isObject = function(x) {
for (let i in x) {
logLi(i, x[i]);
}
};
//Updates Query url when user submits their city
let city = function() {
let api = "http://api.openweathermap.org/data/2.5/weather?q=";
let units = "&units=metric&APPID=xxxxxxx"
let url;
url = api + cityName.value + units;
//Breaks down the JSON
$(document).ready(function() {
$.getJSON(url, function(data) {
let sort = function(x) {
for (let k in x) {
if (typeof x[k] == 'number' || typeof x[k] == 'string') {
logLi(k, x[k]);
} else if (Array.isArray(x[k])) {
logUl(k);
sort(x[k]);
} else if (typeof x[k] == 'object') {
logUl(k);
isObject(x[k]);
}
}
}
sort(data);
});
});
}
//Submition
button.onclick = city;
cityName.addEventListener('keypress', function(e) {
if (e.keyCode == 13) {
city();
}
});
};<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="city" value="London"></input>
<button type="button" return false id="submit">submit</button>
</form>Your code is a bit hard to read but i "cracked it". I made it work like this:
1) I've added a new div with an ID of "weather"
<form>
<input id="city" value="London"></input>
<button type="button" return false id="submit">submit</button>
</form>
<div id="weather"></div>
2) After this in js script add a new variable
let weather = document.getElementById('weather'); at begining inside window.onload function
3) In code change occurances of document.querySelector('body') with weather
4) In the end inside city function at begining add weather.innerHTML = ''; This will clear the html of weather like there is nothing in it.
Here is the example, just run the code snippet:
window.onload = function() {
let cityName = document.querySelector("#city");
let button = document.querySelector("#submit");
let weather = document.getElementById('weather');
// Checks value type and displays property and value.
let logLi = function(k, j) {
if (typeof j === 'object') {
isObject(j);
} else {
let li = document.createElement('LI');
let liText = document.createTextNode('\u00A0\u00A0\u00A0\u00A0' + k + ": " + j);
li.appendChild(liText)
weather.appendChild(li);
}
}
// Checks Object's name type, and displays name of object or Array
let logUl = function(x) {
if (isNaN(x)) {
let output = document.createElement('UL');
let outputText = document.createTextNode(x);
output.appendChild(outputText);
weather.appendChild(output);
}
}
// Calls logLi on every value in object
let isObject = function(x) {
for (let i in x) {
logLi(i, x[i]);
}
};
//Updates Query url when user submits their city
let city = function() {
weather.innerHTML = '';
let api = "https://api.openweathermap.org/data/2.5/weather?q=";
let units = "&units=metric&APPID=XXXXXXXXXXXXXX"
let url;
url = api + cityName.value + units;
//Breaks down the JSON
$(document).ready(function() {
$.getJSON(url, function(data) {
let sort = function(x) {
for (let k in x) {
if (typeof x[k] == 'number' || typeof x[k] == 'string') {
logLi(k, x[k]);
} else if (Array.isArray(x[k])) {
logUl(k);
sort(x[k]);
} else if (typeof x[k] == 'object') {
logUl(k);
isObject(x[k]);
}
}
}
sort(data);
});
});
}
//Submition
button.onclick = city;
cityName.addEventListener('keypress', function(e) {
if (e.keyCode == 13) {
city();
}
});
};<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="city" value="London"></input>
<button type="button" return false id="submit">submit</button>
</form>
<div id="weather"></div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments