nicht angemeldet
Hallo,
ich möchte eine Seite machen, die dir anhand der Temperatur vorschlägt,
was man anziehen soll wenn man rausgeht.
Dafür benutze ich eine Api von OpenWeather.
Mein Problem ist, dass die Ausgabe nicht nur einmal, sondern pro Abfrage einmal geschrieben werden. 
Deshalb wollte ich fragen, ob sich jemand mit der API auskennt und mir helfen kann. Hier ist der Code:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Weather Application</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<header class="header">
<div class="search">
<input type="text" placeholder="Enter City Name" id="search-txt">
<a id="search-btn" href="#"><i class="fas fa-search"></i></a>
</div>
</header>
<main id="main">
<div class="city-icon">
<div class="city-icon-holder">
<div id="city-name"></div>
<img src="" alt="" id="icon">
</div>
</div>
<div class="temperature">
<div id="temp"></div>
</div>
<div class="humidity">
<div id="humidity-div"></div>
</div>
<div id="output">
<div id = "out"></div>
</div>
</div>
</main>
</div>
<script src='https://use.fontawesome.com/releases/v5.0.13/js/all.js'></script>
<script src="js/index.js"></script>
</body>
</html>
const appKey = "*****";
let searchButton = document.getElementById("search-btn");
let searchInput = document.getElementById("search-txt");
let cityName = document.getElementById("city-name");
let icon = document.getElementById("icon");
let temperature = document.getElementById("temp");
let humidity = document.getElementById("humidity-div");
let output = document.getElementById("out");
let outputHolder = document.getElementById("output");
searchButton.addEventListener("click", findWeatherDetails);
searchInput.addEventListener("keyup", enterPressed);
function enterPressed(event) {
if (event.key === "Enter") {
findWeatherDetails();
}
}
function findWeatherDetails() {
if (searchInput.value === "") {
}else {
let searchLink = "https://api.openweathermap.org/data/2.5/weather?q=" + searchInput.value + "&appid="+appKey;
httpRequestAsync(searchLink, theResponse);
}
}
function theResponse(response) {
let jsonObject = JSON.parse(response);
cityName.innerHTML = jsonObject.name;
icon.src = "http://openweathermap.org/img/w/" + jsonObject.weather[0].icon + ".png";
temperature.innerHTML = parseInt(jsonObject.main.temp - 273) + "°";
humidity.innerHTML = jsonObject.main.humidity + "%";
var celcius = Math.round(parseFloat(jsonObject.main.temp)-273.15);
console.log (celcius)
if (celcius <= 23) {
document.body.style.backgroundColor = '#8181F7';
document.body.style.color = "#d6f286";
jQuery("div#out").prepend("<p id=\"outputPara\">Zieh dir eine Jacke an!</p>");
}
else if (celcius >= 24)
{
document.body.style.backgroundColor = '#FFBF00';
document.body.style.color = "#00d8ff";
jQuery("div#out").prepend("<p id=\"outputPara\">Zieh dir ein kurzärmliges T-Shirt an!</p>");
}
}
function httpRequestAsync(url, callback)
{
console.log(temperature);
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = () => {
if (httpRequest.readyState == 4 && httpRequest.status == 200)
callback(httpRequest.responseText);
}
httpRequest.open("GET", url, true); // true for asynchronous
httpRequest.send();
}
Rolf B
Matthias Apsel
Gunnar Bittersmann
JürgenB
kai345
MudGuard