Ausgabe wird zu oft getätigt

[Rolf B]

Hallo af2111,

das liegt nicht an der API, sondern an Dir. Computer tun nie, was sie sollen. Immer nur das, was man ihnen sagt. Und deiner tut das, was Du ihm gesagt hast: prepend. Häng vor das, was schon da ist, vorne was an.

Was Du möchtest, ist: Schmeiß weg was da ist und nimm was neues. Du könntest prepend durch html ersetzen:

jQuery("div#out").html("<p id=\"outputPara\">Zieh dir eine Jacke an!</p>");

Aber: tu's nicht. Du hast das div mit id=out bereits in einer Variablen stehen. Das kannst Du viel einfacher verwenden:

output.innerHTML = "<p id=\"outputPara\">Zieh dir eine Jacke an!</p>"

Wobei man sich fragen sollte, ob diese divitis nötig ist (eine gefährliche und ansteckende Krankeit!), aber ich kenne dein style.css nicht und weiß nicht, was Du da alles tust. Wenn Du immer ein <p> Element einsetzt, dann sollte dein div#out bereits ein p#out sein und du setzt nur den textContent. Falls Du den Inhalt mit Markup versehen willst, setzt Du innerHTML.

Die Funktion httpRequestAsync kannst Du Dir übrigens schenken. Nimm $.getJSON von jQuery, der erledigt auch gleich den JSON.parse mit. Oder nimm fetch, dann kannst Du jQuery ganz rausschmeißen.

Fiddle mit Beispiel für $.getJSON und fetch. Deinen API-Key habe ich darin durch *** ersetzt, den solltest Du nicht rumposten.

Das hier:

if (celcius <= 23) {
}
else if (celcius >= 24) {
}

ist übrigens auch nur nötig, wenn Du mehr als 2 Stufen baust. Bei nur 2 Stufen reicht statt des else if einfach nur ein else. Der zweite if ist konzeptionell falsch, weil Du damit eine Lücke in der Logik hat: Was ist mit Temperaturwerten zwischen 23 und 24? Ich weiß schon, du rundest und bist hier sicher, aber wenn ein einfacher else reicht, macht man keine neue Bedingung. Und wenn, dann trennscharf mit celsius > 23. Jede Lücke ist eine zuviel.

Rolf